/*
Theme Name: Town Of Salem
Author: DreamCo Design
Author URI: http://www.dreamcodesign.com/
Description: A Custom theme for Blank Media Games.
Version: 1.0
*/

@charset "UTF-8";
/*
	HTML5 Reset :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:
	
	Eric Meyer					:: http://meyerweb.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com
	
-------------------------------------------------------------------------------*/
/* Let's default this puppy out
-------------------------------------------------------------------------------*/
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
  background: transparent; }

article, aside, figure, footer, header, nav, section, details, summary {
  display: block; }

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */
/* Apply a natural box layout model to all elements: http://paulirish.com/2012/box-sizing-border-box-ftw/ */
*, *:before, *:after {
  box-sizing: border-box; }

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {
  max-width: 100%; }

/* force a vertical scrollbar to prevent a jumpy page */
html {
  overflow-y: scroll; }

/* we use a lot of ULs that aren't bulleted. 
	don't forget to restore the bullets within content. */
ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help; }

/* tables still need cellspacing="0" in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0; }

th {
  font-weight: bold;
  vertical-align: bottom; }

td {
  font-weight: normal;
  vertical-align: top; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

pre {
  white-space: pre;
  /* CSS2 */
  white-space: pre-wrap;
  /* CSS 2.1 */
  white-space: pre-line;
  /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word;
  /* IE */ }

input[type="radio"] {
  vertical-align: text-bottom; }

input[type="checkbox"] {
  vertical-align: bottom; }

.ie7 input[type="checkbox"] {
  vertical-align: baseline; }

.ie6 input {
  vertical-align: text-bottom; }

select, input, textarea {
  font: 99% sans-serif; }

table {
  font-size: inherit;
  font: 100%; }

small {
  font-size: 85%; }

strong {
  font-weight: bold; }

td, td img {
  vertical-align: top; }

/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* standardize any monospaced elements */
pre, code, kbd, samp {
  font-family: monospace, sans-serif; }

/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
input[type=file],
button {
  cursor: pointer; }

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {
  margin: 0; }

/* make buttons play nice in IE */
button,
input[type=button] {
  width: auto;
  overflow: visible; }

/* scale images in IE7 more attractively */
.ie7 img {
  -ms-interpolation-mode: bicubic; }

/* prevent BG image flicker upon hover 
   (commented out as usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
*/
/* let's clear some floats */
.clearfix:before, .clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden; }

.clearfix:after {
  clear: both; }

.clearfix {
  zoom: 1; }

@-webkit-keyframes fluidboxLoading {
  0% {
    -webkit-transform: translate(-50%, -50%) rotateX(0) rotateY(0); }
  50% {
    -webkit-transform: translate(-50%, -50%) rotateX(-180deg) rotateY(0); }
  100% {
    -webkit-transform: translate(-50%, -50%) rotateX(-180deg) rotateY(-180deg); } }
@keyframes fluidboxLoading {
  0% {
    -webkit-transform: translate(-50%, -50%) rotateX(0) rotateY(0);
            transform: translate(-50%, -50%) rotateX(0) rotateY(0); }
  50% {
    -webkit-transform: translate(-50%, -50%) rotateX(-180deg) rotateY(0);
            transform: translate(-50%, -50%) rotateX(-180deg) rotateY(0); }
  100% {
    -webkit-transform: translate(-50%, -50%) rotateX(-180deg) rotateY(-180deg);
            transform: translate(-50%, -50%) rotateX(-180deg) rotateY(-180deg); } }
.fluidbox {
  outline: none; }

.fluidbox-overlay {
  background-color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  /* Transition time for overlay is halved to ensure that flickering doesn't happen */
  -webkit-transition: all 0.125s ease-in-out 0.125s;
          transition: all 0.125s ease-in-out 0.125s; }

.fluidbox-wrap {
  background-position: center center;
  background-size: cover;
  margin: 0 auto;
  position: relative;
  -webkit-transition: all 0.25s ease-in-out;
          transition: all 0.25s ease-in-out;
  /* To prevent flickering, we delay the showing of the image */ }
  .fluidbox-closed .fluidbox-wrap img {
    -webkit-transition: opacity 0s ease-in-out 0.25s;
            transition: opacity 0s ease-in-out 0.25s; }

.fluidbox-ghost {
  background-size: 100% 100%;
  background-position: center center;
  position: absolute;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  -webkit-transition-duration: 0s, 0.25s;
          transition-duration: 0s, 0.25s;
  -webkit-transition-delay: 0.25s, 0s;
          transition-delay: 0.25s, 0s; }
  .fluidbox-opened .fluidbox-ghost {
    -webkit-transition-delay: 0s, 0s;
            transition-delay: 0s, 0s; }

.fluidbox-loader {
  -webkit-perspective: 200px;
          perspective: 200px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0; }
  .fluidbox-loader::before {
    -webkit-animation: fluidboxLoading 1s infinite;
    animation: fluidboxLoading 1s infinite;
    /* You can replace this with any color you want, or even a loading gif if desired */
    background-color: rgba(255, 255, 255, 0.85);
    content: '';
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transition: all 0.25s ease-in-out;
            transition: all 0.25s ease-in-out;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20%;
    padding-bottom: 20%;
    /* Delay disapparing of loader for graceful transition */
    -webkit-transition-delay: 0.125s;
            transition-delay: 0.125s; }

.fluidbox-loading .fluidbox-loader::before {
  opacity: 1;
  -webkit-transition-delay: 0s;
          transition-delay: 0s; }

/*  Syntax Quick Reference
  --------------------------
  column($ratios: 1, $offset: 0, $cycle: 0, $uncycle: 0, $gutter: $jeet-gutter)
  span($ratio: 1, $offset: 0)
  shift($ratios: 0, $col_or_span: column, $gutter: $jeet-gutter)
  unshift()
  edit()
  center($max_width: 1410px, $pad: 0)
  stack($pad: 0, $align: false)
  unstack()
  align($direction: both)
  cf()
*/
/**
 * Grid settings.
 * All values are defaults and can therefore be easily overidden.
 */
/**
 * List functions courtesy of the wonderful folks at Team Sass.
 * Check out their awesome grid: Singularity.
 */
/**
 * Get  percentage from a given ratio.
 * @param {number} [$ratio=1] - The column ratio of the element.
 * @returns {number} - The percentage value.
 */
/**
 * Work out the column widths based on the ratio and gutter sizes.
 * @param {number} [$ratios=1] - The column ratio of the element.
 * @param {number} [$gutter=$jeet-gutter] - The gutter for the column.
 * @returns {list} $width $gutter - A list containing the with and gutter for the element.
 */
/**
 * Get the set layout direction for the project.
 * @returns {string} $direction - The layout direction.
 */
/**
 * Replace a specified list value with a new value (uses built in set-nth() if available)
 * @param {list} $list - The list of values you want to alter.
 * @param {number} $index - The index of the list item you want to replace.
 * @param {*} $value - The value you want to replace $index with.
 * @returns {list} $list - The list with the value replaced or removed.
 * @warn if an invalid index is supplied.
 */
/**
 * Reverse a list (progressively enhanced for Sass 3.3)
 * @param {list} $list - The list of values you want to reverse.
 * @returns {list} $result - The reversed list.
 */
/**
 * Get the opposite direction to a given value.
 * @param {string} $dir - The direction you want the opposite of.
 * @returns {string} - The opposite direction to $dir.
 * @warn if an incorrect string is provided.
 */
/**
 * Style an element as a column with a gutter.
 * @param {number} [$ratios=1] - A width relative to its container as a fraction.
 * @param {number} [$offset=0] - A offset specified as a fraction (see $ratios).
 * @param {number} [$cycle=0] - Easily create an nth column grid where $cycle equals the number of columns.
 * @param {number} [$uncycle=0] - Undo a previous cycle value to allow for a new one.
 * @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
 */
/**
 * An alias for the column mixin.
 * @param [$args...] - All arguments get passed through to column().
 */
/**
 * Get the width of a column and nothing else.
 * @param {number} [$ratios=1] - A width relative to its container as a fraction.
 * @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
 */
/**
 * Get the gutter size of a column and nothing else.
 * @param {number} [ratios=1] - A width relative to its container as a fraction.
 * @param {number} [gutter=jeet.gutter] - Specify the gutter width as a percentage of the containers width.
 */
/**
 * An alias for the column-width function.
 * @param [$args...] - All arguments get passed through to column().
 */
/**
 * An alias for the column-gutter function.
 * @param [$args...] - All arguments get passed through to column().
 */
/**
 * Style an element as a column without any gutters for a seamless row.
 * @param {number} [$ratios=1] - A width relative to its container as a fraction.
 * @param {number} [$offset=0] - A offset specified as a fraction (see $ratios).
 * @param {number} [cycle=0] - Easily create an nth column grid where cycle equals the number of columns.
 * @param {number} [uncycle=0] - Undo a previous cycle value to allow for a new one.
 */
/**
 * Reorder columns without altering the HTML.
 * @param {number} [$ratios=0] - Specify how far along you want the element to move.
 * @param {string} [$col-or-span=column] - Specify whether the element has a gutter or not.
 * @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
 */
/**
 * Reset an element that has had shift() applied to it.
 */
/**
 * View the grid and its layers for easy debugging.
 * @param {string} [$color=black] - The background tint applied.
 * @param {boolean} [$important=false] - Whether to apply the style as !important.
 */
/**
 *  Alias for edit().
 */
/**
 * Horizontally center an element.
 * @param {number} [$max-width=1410px] - The max width the element can be.
 * @param {number} [$pad=0] - Specify the element's left and right padding.
 */
/**
 * Uncenter an element.
 */
/**
 * Stack an element so that nothing is either side of it.
 * @param {number} [$pad=0] - Specify the element's left and right padding.
 * @param {boolean/string} [$align=false] - Specify the text align for the element.
 */
/**
 * Unstack an element.
 */
/**
 * Center an element on either or both axes.
 * @requires A parent container with relative positioning.
 * @param {string} [$direction=both] - Specify which axes to center the element on.
 */
/**
 * Apply a clearfix to an element.
 */
@font-face {
  font-family: 'alegreyablack';
  src: url("assets/font/alegreya/alegreya-black-webfont.eot");
  src: url("assets/font/alegreya/alegreya-black-webfont.eot?#iefix") format("embedded-opentype"), url("assets/font/alegreya/alegreya-black-webfont.woff2") format("woff2"), url("assets/font/alegreya/alegreya-black-webfont.woff") format("woff"), url("assets/font/alegreya/alegreya-black-webfont.ttf") format("truetype"), url("assets/font/alegreya/alegreya-black-webfont.svg#alegreyablack") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'alegreyaregular';
  src: url("assets/font/alegreya/alegreya-regular-webfont.eot");
  src: url("assets/font/alegreya/alegreya-regular-webfont.eot?#iefix") format("embedded-opentype"), url("assets/font/alegreya/alegreya-regular-webfont.woff2") format("woff2"), url("assets/font/alegreya/alegreya-regular-webfont.woff") format("woff"), url("assets/font/alegreya/alegreya-regular-webfont.ttf") format("truetype"), url("assets/font/alegreya/alegreya-regular-webfont.svg#alegreyaregular") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'blackwood_castleregular';
  src: url("assets/font/blackwood_castle/blackwood_castle-webfont.eot");
  src: url("assets/font/blackwood_castle/blackwood_castle-webfont.eot?#iefix") format("embedded-opentype"), url("assets/font/blackwood_castle/blackwood_castle-webfont.woff2") format("woff2"), url("assets/font/blackwood_castle/blackwood_castle-webfont.woff") format("woff"), url("assets/font/blackwood_castle/blackwood_castle-webfont.ttf") format("truetype"), url("assets/font/blackwood_castle/blackwood_castle-webfont.svg#blackwood_castleregular") format("svg");
  font-weight: normal;
  font-style: normal; }
/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection {
  background: #019A9A none repeat scroll 0% 0%;
  color: #fff;
  text-shadow: none; }

::selection {
  background: rgba(255, 204, 0, 0.5);
  color: #fff;
  text-shadow: none; }

/*	j.mp/webkit-tap-highlight-color */
a:link {
  -webkit-tap-highlight-color: rgba(255, 204, 0, 0.5); }

ins {
  background-color: rgba(255, 204, 0, 0.5);
  color: #000;
  text-decoration: none; }

mark {
  background-color: rgba(255, 204, 0, 0.5);
  color: #000;
  font-style: italic;
  font-weight: bold; }

/* Mozilla dosen't style place holders by default */
input:-moz-placeholder {
  color: #a9a9a9; }

textarea:-moz-placeholder {
  color: #a9a9a9; }

html {
  font-size: 18px;
  -webkit-font-smoothing: antialiased; }

html,
body {
  min-height: 100%; }

body {
  text-align: center;
  background-image: url("assets/img/bg.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  box-shadow: inset 0 0 20vw 10vw rgba(0, 0, 0, 0.5); 
  width: 100%;
  height: 100%;
  overflow-x: hidden;}

body,  button {
  font: normal 100%/1.67 'alegreyaregular', Georgia, 'Times New Roman', Times, sans-serif;
  color: #bbb; }
  
select, input, textarea {
	font: normal 100%/1.67 'alegreyaregular', Georgia, 'Times New Roman', Times, sans-serif;
	color: #222;
}
.gform_body input[type] {
	background-color: #fff;
	border: 1px solid #ddd;
}
.gform_footer .button {
	background-color: #099;
	border: 1px solid #05c2c2;
	color: #fff;
}
p {
  margin-top: 1em; }

h1 {
  font-family: 'blackwood_castleregular', serif;
  font-size: 4rem;
  letter-spacing: -.025em; }

h2 {
  font-size: 1.5rem;
  color: #fff; }

h3 {
  display: block;
  padding: .125em 0;
  font-family: 'alegreyablack', Georgia, 'Times New Roman', Times, sans-serif;
  font-size: .75rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .2em;
  border-bottom: 1px solid #444; }

a {
  color: #FFCC00;
  text-decoration: none;
  -webkit-transition: all 200ms ease;
          transition: all 200ms ease;
  cursor: pointer; }
  a:hover {
    color: #ffd633; }

a.btn,
button {
  display: inline-block;
  -webkit-appearance: none;
  padding: .5em 1em;
  line-height: 1;
  font-size: .75rem;
  font-family: 'alegreyablack', Georgia, 'Times New Roman', Times, sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #000;
  background-color: rgba(0, 204, 204, 0.75);
  border: 0;
  border-top: 2px solid rgba(255, 255, 255, 0.5);
  border-bottom: 2px solid rgba(0, 0, 0, 0.5);
  border-radius: .25em;
  box-shadow: .025rem .05rem 0 #000; }
  a.btn:hover,
  button:hover {
    background-color: #00cccc; }

label {
  display: block; }

input[type] {
  padding: .5em 1em;
  line-height: 1;
  background-color: #111;
  border: 1px solid #444;
  border-radius: .25em;
  vertical-align: middle; }
  input[type][type=checkbox] {
    margin-right: .5em; }

.fluidbox-overlay {
  background-color: rgba(0, 0, 0, 0.8); }

.socnets ul {
  font-size: 0; }
.socnets li {
  display: inline-block; }
  .socnets li svg {
    width: 98%;
    height: 98%; }
    .socnets li svg path,
    .socnets li svg polygon,
    .socnets li svg rect {
      fill: rgba(255, 255, 255, 0.33); }
  .socnets li:hover svg path,
  .socnets li:hover svg polygon,
  .socnets li:hover svg rect {
    fill: #FFCC00; }

.content {
  margin: 0 auto;
  width: 1140px;
  padding: 5vh 2vw; }
  
.company-part h2 {
	color: #FC0; }
	
.company-part ul {
	margin-top: 1em; }

header {
  position: fixed;
  z-index: 1000;
  top: 0;
  width: 100%;
  height: 3.5rem;
  background-color: #000;
  box-shadow: 0 0 5rem 2.5rem #000; }
  header .content {
    padding-top: 0;
    padding-bottom: 0;
    text-align: left; }
  header h1 {
    float: left;
    font-family: 'blackwood_castleregular', serif;
    font-size: 1.75rem;
    line-height: 3.5rem;
    letter-spacing: -.025em; }
  header nav {
    float: right; }
    header nav ul {
      font-size: 0; }
    header nav li {
      display: inline-block; }
    header nav a {
      display: block;
      padding: 0 1em;
      height: 3.5rem;
      line-height: 3.5rem;
      font-size: 0.9rem;
      color: rgba(255, 255, 255, 0.5); }
      header nav a.on, header nav a:hover {
        color: #FFCC00; }
      header nav a.btn {
        margin-left: 1rem;
        margin-top: 1.2em;
        height: 1.75rem;
        padding: 0 1em;
        font-size: .875rem;
        line-height: 1.5rem;
        color: #000;
        text-shadow: none;
        background-color: rgba(0, 204, 204, 0.75);
        background-image: none; }
        header nav a.btn:hover {
          color: #000;
          background-color: #00cccc; }
      header .main .menu {
	    float: left; }
  header .socnets {
    float: left;
    margin-left: 2rem;
    height: 3.5rem; }
    header .socnets li {
      width: 2rem;
      height: 3.5rem;
      padding: 0.35rem; }
  header .language {
    float: left;
    margin-left: 1.5rem;
    padding: 0;
    width: 7em;
    font-size: .875rem;
    line-height: 3.5rem;
    overflow: hidden; 
    padding-top: 12px;}
    header .language #lang_sel li, header .language #lang_sel {
	    width: 100%;
    }
    header .language select {
      appearance: none;
      display: inline-block;
      padding: 5px 8px;
      width: 100%;
      background-color: transparent;
      background-image: none;
      border: 1px solid #333;
      border-radius: 3px;
      box-shadow: none; }
      header .language select:focus {
        outline: none; }
  header + * {
    padding-top: 10vh; }

a.play {
  margin-top: 5vh;
  font-size: 1.5rem;
  color: #FFCC00;
  background-color: #675a1c;
  background-image: url("assets/img/bg-wood.png");
  background-size: contain;
  border: 2px solid #000; }
  a.play:hover {
    color: #fff; }

section {
  text-align: left;
  float: left;
  width: 100%;
  opacity: 0;
  -webkit-transition: opacity 1s ease;
          transition: opacity 1s ease; }
  section.show {
    opacity: 1; }
  section.hero {
    text-align: center; }
    section.hero h1 {
      display: inline-block;
      margin-top: 15vh;
      width: 30rem;
      height: 6rem;
      background-image: url("assets/img/logo-town-of-salem.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      text-indent: -9999px; }
    section.hero h2 {
      font-size: 1.25rem; }
  section.cta .content {
    *zoom: 1;
    padding-bottom: 15vh; }
    section.cta .content:before, section.cta .content:after {
      content: '';
      display: table; }
    section.cta .content:after {
      clear: both; }
  section.cta li {
    *zoom: 1;
    float: left;
    clear: none;
    text-align: inherit;
    width: 31.3333333333%;
    margin-left: 0%;
    margin-right: 3%;
    background-size: cover;
    background-position: center center; }
    section.cta li:before, section.cta li:after {
      content: '';
      display: table; }
    section.cta li:after {
      clear: both; }
    section.cta li:last-child {
      margin-right: 0%; }
  section.cta a {
    height: 10rem;
    line-height: 1.125;
    display: block;
    position: relative;
    border: 9px double #000;
    box-shadow: inset 2.25px 2.25px 0 #3f3711, inset 4.5px 4.5px 0 #000, 2.25px 2.25px 0 #3f3711, 4.5px 4.5px 0 #000; }
    section.cta a:before {
      content: '';
      position: absolute;
      top: -6px;
      right: -6px;
      bottom: -6px;
      left: -6px;
      -webkit-border-image: url("assets/img/bg-wood.png") 5% repeat;
           -o-border-image: url("assets/img/bg-wood.png") 5% repeat;
              border-image: url("assets/img/bg-wood.png") 5% repeat;
      -webkit-transition: all 200ms ease;
              transition: all 200ms ease; }
    section.cta a > span {
      position: absolute;
      bottom: 5%;
      left: 5%;
      font-family: 'alegreyablack', Georgia, 'Times New Roman', Times, sans-serif;
      font-size: .875rem;
      line-height: 1;
      color: #00cccc;
      -webkit-transition: all 200ms ease;
              transition: all 200ms ease; }
      section.cta a > span span {
        display: block;
        margin-left: 0;
        font-size: 250%;
        color: rgba(255, 255, 255, 0.75);
        text-shadow: 0.025em 0.05em 0 #003333;
        text-transform: uppercase;
        -webkit-transition: all 200ms ease;
                transition: all 200ms ease; }
    section.cta a:hover {
      color: rgba(0, 204, 204, 0.75);
      background-color: rgba(119, 119, 102, 0.875); }
      section.cta a:hover > span {
        left: 10%; }
        section.cta a:hover > span span {
          margin-left: 5%;
          color: #00cccc;
          text-shadow: none; }
      section.cta a:hover:after {
        opacity: 1; }
  section.intro {
    font-size: 1.25rem;
    color: #fff;
    background-color: #003333;
    background-image: url("assets/img/bg-grain.jpg");
    background-size: cover;
    background-attachment: fixed; }
    section.intro .content {
      padding-top: 10vh;
      padding-bottom: 10vh; }
  section.pulls .content {
    *zoom: 1; }
    section.pulls .content:before, section.pulls .content:after {
      content: '';
      display: table; }
    section.pulls .content:after {
      clear: both; }
  section.pulls div.news,
  section.pulls div.forum {
    *zoom: 1;
    float: left;
    clear: none;
    text-align: inherit;
    width: 48.5%;
    margin-left: 0%;
    margin-right: 3%; }
    section.pulls div.news:before, section.pulls div.news:after,
    section.pulls div.forum:before,
    section.pulls div.forum:after {
      content: '';
      display: table; }
    section.pulls div.news:after,
    section.pulls div.forum:after {
      clear: both; }
    section.pulls div.news:last-child,
    section.pulls div.forum:last-child {
      margin-right: 0%; }
    section.pulls div.news h3,
    section.pulls div.forum h3 {
      margin: 3vh 0; }
  section.gameplay .gameplay_part {
    *zoom: 1; }
    section.gameplay .gameplay_part:before, section.gameplay .gameplay_part:after {
      content: '';
      display: table; }
    section.gameplay .gameplay_part:after {
      clear: both; }
  section.gameplay h2 {
    margin: 6vh 0 2vh 0; }
  section.gameplay h3 {
    margin: 3vh 0 1vh 0; }
  section.gameplay .image img {
    display: block; }
  section.gameplay .image a {
    display: block;
    position: relative;
    border: 9px double #000;
    box-shadow: inset 2.25px 2.25px 0 #3f3711, inset 4.5px 4.5px 0 #000, 2.25px 2.25px 0 #3f3711, 4.5px 4.5px 0 #000; }
    section.gameplay .image a:before {
      content: '';
      position: absolute;
      top: -6px;
      right: -6px;
      bottom: -6px;
      left: -6px;
      -webkit-border-image: url("assets/img/bg-wood.png") 5% repeat;
           -o-border-image: url("assets/img/bg-wood.png") 5% repeat;
              border-image: url("assets/img/bg-wood.png") 5% repeat;
      -webkit-transition: all 200ms ease;
              transition: all 200ms ease; }
  section.gameplay .image.lobby {
    *zoom: 1;
    float: left;
    clear: none;
    text-align: inherit;
    width: 31.3333333333%;
    margin-left: 0%;
    margin-right: 3%; }
    section.gameplay .image.lobby:before, section.gameplay .image.lobby:after {
      content: '';
      display: table; }
    section.gameplay .image.lobby:after {
      clear: both; }
    section.gameplay .image.lobby:last-child {
      margin-right: 0%; }
  section.gameplay ul.phases li {
    *zoom: 1;
    float: left;
    clear: none;
    text-align: inherit;
    width: 31.3333333333%;
    margin-left: 0%;
    margin-right: 3%; }
    section.gameplay ul.phases li:before, section.gameplay ul.phases li:after {
      content: '';
      display: table; }
    section.gameplay ul.phases li:after {
      clear: both; }
    section.gameplay ul.phases li:last-child {
      margin-right: 0%; }

ul.news li,
ul.forum li, ul#recent_board_topics li {
  margin-bottom: 5vh;
  padding-right: 5rem; }
ul.news a.btn,
ul.forum a.btn {
  margin-top: 1rem; }
ul.news p.excerpt,
ul.forum p.excerpt {
  font-size: .875rem; }
  
.bddw-title a {
	font-size: 1.5rem;
}

div.sign-in {
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: .875rem;
  text-align: left;
  opacity: 0;
  -webkit-transition: opacity 500ms ease;
          transition: opacity 500ms ease; }
  div.sign-in .cols {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) scale(0.9);
        -ms-transform: translate(-50%, -50%) scale(0.9);
            transform: translate(-50%, -50%) scale(0.9);
    width: 60%;
    -webkit-transition: -webkit-transform 500ms ease;
            transition: transform 500ms ease; }
  div.sign-in.show {
    z-index: 1001;
    opacity: 1; }
    div.sign-in.show .cols {
      -webkit-transform: translate(-50%, -50%) scale(1);
          -ms-transform: translate(-50%, -50%) scale(1);
              transform: translate(-50%, -50%) scale(1); }
  div.sign-in:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.85); }
div.sign-in:after {
    content: '×';
    position: absolute;
    top: 0;
    right: 0;
    width: 3em;
    height: 3em;
    font-family: 'times new roman';
    font-size: 3rem;
    color: #fff; }
  div.sign-in .login,
  div.sign-in .register {
    *zoom: 1;
    float: left;
    clear: none;
    text-align: inherit;
    width: 46.9072164948%;
    margin-left: 0%;
    margin-right: 6.1855670103%; }
    div.sign-in .login:before, div.sign-in .login:after,
    div.sign-in .register:before,
    div.sign-in .register:after {
      content: '';
      display: table; }
    div.sign-in .login:after,
    div.sign-in .register:after {
      clear: both; }
    div.sign-in .login:last-child,
    div.sign-in .register:last-child {
      margin-right: 0%; }
  div.sign-in h3 {
    margin-bottom: 1rem; }
div.backer-names p {
	font-size: 0.8em;
	width: 33.333%;
	float: left; }
section.backers .content {
	padding-bottom: 15px;}
div.names { 
	padding-top: 0px; }

footer {
  float: left;
  width: 100%;
  margin-top: 5rem;
  font-size: .75rem;
  color: #777766;
  text-align: left;
  background: #000;
  box-shadow: 0 0 5rem 2.5rem #000; }
  footer .content {
    padding-bottom: 15vh;
    position: relative; }
  footer nav ul {
    margin-left: -.5rem;
    font-size: 0; }
  footer nav li {
    display: inline-block; }
  footer nav a {
    display: block;
    padding: 0 .5rem;
    font-size: .75rem;
    color: #b38f00; }
    footer nav a.on, footer nav a:hover {
      color: #FFCC00; }
  footer nav.main ul {
    margin-left: -1rem; }
  footer nav.main a {
    padding: 0 1rem;
    font-size: .875rem; }
  footer .copyright {
    margin-top: 1rem; }
  footer .socnets {
    position: absolute;
    top: 3.5vh;
    right: 1.5rem;
    height: 3.5rem; }
    footer .socnets li {
      width: 2.3333333333rem;
      height: 3.5rem;
      padding: 0.4375rem; }
      
body.admin-bar header {top: 28px;} 


/* Added by JS 
-------------------------------------------------------------------------------*/
.roles .town-roles, .roles .mafia-roles, .roles .neutral-roles {
	float: left;
	width: 100%;
	text-align: center;
}
.roles .role-box {
	width: 33.333%;
	float: left;
	padding-bottom: 15px;
}
.roles .role-img {
	background-color: transparent;
    background-image: url("assets/img/bg-grain.jpg");
    background-size: cover;
	width: 18em;
	height: 22em;
	text-align: center;
	position: relative;
	z-index: 0;
}
.roles .role-img h2 {
	margin-top: -30px;
}
.roles img {
	max-width: 100%;
	display: inline-block;
	margin-top: 30px;
}
.roles .hide {
	font-size: 0.8em !important;
	text-align: left;
	position: absolute;
	padding-left: 15px;
	padding-right: 15px;
	z-index: 5;
	top: 0px;
	left: 0px;
	opacity: 0;
	height: 100%;
	width: 100%;
}
.roles .hide:hover {
	opacity: 1;
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	-ms-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
}
.roles .fade-text span {
	font-weight: bold;
	color: #FC0;
}
.roles .fade-text {
	text-align: left;
}
.slideout-menu {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 0;
  width: 256px;
  overflow-y: none;
  display: none;
  background-color: #213131;
}

.slideout-panel {
  position:relative;
  z-index: 1;
  background-image: url("assets/img/bg.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
  overflow: hidden;
}

.slideout-open .slideout-menu {
  display: block;
}

button.mobile-menu {
	display: none;
}
.roles .role-img h1 {
	font-size: 36px;
	margin-top: 45%;
	line-height: 1em;
	color: #fc0;
	display: none;
}
div.sign-in .close-popup {
	position: absolute;
	right: 20px;
	top: 20px;
	width: 30px;
}
.roles.mobile-roles {
	display: none;
}
.rewards h2 {
	margin-bottom: 5px;
}
.rewards p {
	margin-top: 5px;
	margin-bottom: 1.5em;
}
.rewards .intro h2, .rewards .intro, .rewards .referral-link, .rewards {
	text-align: center;
}
.rewards .intro {
	padding: 15px;
	margin-bottom: 25px;
}
.rewards img {
	width: 100%;
	padding-bottom: 15px;
}
.rewards ul li {
	background-color: #111;
	padding: 15px;
	border: 1px solid #222;
	margin-bottom: 2px;
	font-size: 1.1em;
	color: #FFD633;
	text-align: center;
}
.member {
	float: left;
	width: 100%;
	padding: 15px 0px;
	border-bottom: 1px solid #444;
}
.member img {
	float: left;
	padding-right: 15px;
	height: auto;
}
.login input[type] {
	background-color: #E9E7BE;
}



/* Media queries
-------------------------------------------------------------------------------*/
@media all and (max-width: 1199px) {
	.content {
		width: 100%;
	}
	header .socnets, header .language {
		margin-left: 0.5rem;
	}
	.roles .role-box {
		padding-left: 5px;
		padding-right: 5px;
	}
}
@media all and (max-width: 1024px) {
	.roles .role-img img {
		margin-top: 0px;
	}
	.roles .role-img {
		width: 100%;
		height: 30em;
	}
	.roles .role-img h1 {
		display: block;
	}
	.slideout-panel {
		background-image: url("assets/img/bg768.jpg");
		background-attachment: scroll;
		background-size: 100%;
		background-repeat: repeat-y;
	}
	body {
		background-image: url("assets/img/bg768.jpg");
		background-attachment: scroll;
		background-size: 100%;
		background-repeat: repeat-y;
	}
	.roles .role-img {
		background-attachment: scroll;
		background-size: 100%;
		background-repeat: repeat-y;
	}
}
@media all and (max-width: 992px) {
	button.mobile-menu {
		display: block;
		background-color: #000;
		border: none;
		box-shadow: none;
		width: 60px;
		padding: 10px;
		position: fixed;
		right: 0px;
		z-index: 100;
	}
	nav.main, header .language {
		display: none;
	}
	footer nav.main, header .language-mobile {
		display: block;
	}
	nav ul li.menu-item {
		background-color: transparent;
		padding-top: 5px;
		padding-bottom: 5px;
		margin-bottom: 5px;
	}
	nav ul li.menu-item:hover {
		background-color: #08A5A5;
	}
	nav a.btn {
		width: 100%;
		border: none;
		border-radius: 0px;
		padding: 15px;
	}
	.slideout-panel {
		background-image: url("assets/img/bg.jpg");
		background-size: cover;
		background-position: center center;
		background-attachment: fixed;
	}
	body {
		background-image: url("assets/img/bg.jpg");
		background-size: cover;
		background-position: center center;
		background-attachment: fixed;
	}
	.roles .role-img, section.intro {
		background-image: none;
		background-color: #407B7C;
	}
	.language-mobile {
		position: relative;
		width: 100%;
		margin-top: 20px;
	}
}
@media all and (max-width: 991px) {
	
}
@media all and (max-width: 768px) {
	.slideout-panel {
		background-image: url("assets/img/bg768.jpg");
		background-attachment: scroll;
		background-size: 100%;
		background-repeat: repeat-y;
	}
	body {
		background-image: url("assets/img/bg768.jpg");
		background-attachment: scroll;
		background-size: 100%;
		background-repeat: repeat-y;
	}
	.roles .role-img {
		background-attachment: scroll;
		background-size: 100%;
		background-repeat: repeat-y;
	}
	
}
@media all and (max-width: 767px) {
	section.cta li {
		width: 100%;
	}
	footer .socnets {
		position: relative;
		right: auto;
		height: auto;
		top: auto;
	}
	section.pulls div.news, section.pulls div.forum {
		width: 100%;
	}
	section.pulls div.forum {
		margin-top: 15px;
	}
	ul.news li, ul.forum li {
		padding-right: 15px;
	}
	section.gameplay .image.lobby {
		width: 50%;
	}
	section.gameplay ul.phases li {
		margin-right: 0px;
		width: 100%;
		margin-bottom: 50px;
	}
	.roles .role-box {
		width: 50%;
	}
	.roles .hide {
		font-size: 1em !important;
	}
	section.roles {
		display: none;
	}
	section.roles.mobile-roles {
		display: block;
	}
	section.roles .role-img {
		padding: 15px;
		height: auto;
	}
}
@media all and (max-width: 480px) {
	section.hero h1 {
		width: 100%;
	}
	section.gameplay .image.lobby {
		width: 100%;
		margin-bottom: 15px;
	}
	.roles .role-box {
		width: 100%;
	}
	#input_1_1_3_container input, #input_1_1_6_container input {
		width: 100%;
	}
	#input_1_1_3_container, #input_1_1_6_container, #input_1_2, #input_1_3, #input_1_4, #input_1_5 {
		width: 100%;
	}
	.gform_wrapper .gform_footer {
		text-align: center;
	}
}
@media all and (max-width: 360px) {
	.roles .role-img p {
		margin-top: 0.3em;
	}
}
@media all and (max-width: 320px) {
	header h1 {
		display: none;
	}
	.roles h1 {
		font-size: 3rem;
	}
	header {
		box-shadow: none;
	}
}


/* Print styles
-------------------------------------------------------------------------------*/