/* Variables */
/* Site mixins */
/* Glyphs */
/* Responsive */
/* Utility */
/* Variables */
/* Site mixins */
/* Glyphs */
/* Responsive */
/* Utility */
/* normalize.css v1.1.0 | MIT License | git.io/normalize */
/* line 4, ../sass/reset.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block;
}

/* line 4, ../sass/reset.scss */
audio, canvas, video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

/* line 4, ../sass/reset.scss */
audio:not([controls]) {
  display: none;
  height: 0;
}

/* line 4, ../sass/reset.scss */
[hidden] {
  display: none;
}

/* line 4, ../sass/reset.scss */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* line 4, ../sass/reset.scss */
html, button, input, select, textarea {
  font-family: sans-serif;
}

/* line 4, ../sass/reset.scss */
body {
  margin: 0;
}

/* line 4, ../sass/reset.scss */
a:focus {
  outline: thin dotted;
}

/* line 4, ../sass/reset.scss */
a:active, a:hover {
  outline: 0;
}

/* line 4, ../sass/reset.scss */
h1 {
  font-size: 2em;
  margin: .67em 0;
}

/* line 4, ../sass/reset.scss */
h2 {
  font-size: 1.5em;
  margin: .83em 0;
}

/* line 4, ../sass/reset.scss */
h3 {
  font-size: 1.17em;
  margin: 1em 0;
}

/* line 4, ../sass/reset.scss */
h4 {
  font-size: 1em;
  margin: 1.33em 0;
}

/* line 4, ../sass/reset.scss */
h5 {
  font-size: .83em;
  margin: 1.67em 0;
}

/* line 4, ../sass/reset.scss */
h6 {
  font-size: .67em;
  margin: 2.33em 0;
}

/* line 4, ../sass/reset.scss */
abbr[title] {
  border-bottom: 1px dotted;
}

/* line 4, ../sass/reset.scss */
b, strong {
  font-weight: bold;
}

/* line 4, ../sass/reset.scss */
blockquote {
  margin: 1em 40px;
}

/* line 4, ../sass/reset.scss */
dfn {
  font-style: italic;
}

/* line 4, ../sass/reset.scss */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/* line 4, ../sass/reset.scss */
mark {
  background: #ff0;
  color: #000;
}

/* line 4, ../sass/reset.scss */
p, pre {
  margin: 1em 0;
}

/* line 4, ../sass/reset.scss */
code, kbd, pre, samp {
  font-family: monospace,serif;
  _font-family: 'courier new',monospace;
  font-size: 1em;
}

/* line 4, ../sass/reset.scss */
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* line 4, ../sass/reset.scss */
q {
  quotes: none;
}

/* line 4, ../sass/reset.scss */
q:before, q:after {
  content: '';
  content: none;
}

/* line 4, ../sass/reset.scss */
small {
  font-size: 80%;
}

/* line 4, ../sass/reset.scss */
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

/* line 4, ../sass/reset.scss */
sup {
  top: -0.5em;
}

/* line 4, ../sass/reset.scss */
sub {
  bottom: -0.25em;
}

/* line 4, ../sass/reset.scss */
dl, menu, ol, ul {
  margin: 1em 0;
}

/* line 4, ../sass/reset.scss */
dd {
  margin: 0 0 0 40px;
}

/* line 4, ../sass/reset.scss */
menu, ol, ul {
  padding: 0 0 0 40px;
}

/* line 4, ../sass/reset.scss */
nav ul, nav ol {
  list-style: none;
  list-style-image: none;
}

/* line 4, ../sass/reset.scss */
img {
  border: 0;
  -ms-interpolation-mode: bicubic;
}

/* line 4, ../sass/reset.scss */
svg:not(:root) {
  overflow: hidden;
}

/* line 4, ../sass/reset.scss */
figure {
  margin: 0;
}

/* line 4, ../sass/reset.scss */
form {
  margin: 0;
}

/* line 4, ../sass/reset.scss */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: .35em .625em .75em;
}

/* line 4, ../sass/reset.scss */
legend {
  border: 0;
  padding: 0;
  white-space: normal;
  *margin-left: -7px;
}

/* line 4, ../sass/reset.scss */
button, input, select, textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle;
}

/* line 4, ../sass/reset.scss */
button, input {
  line-height: normal;
}

/* line 4, ../sass/reset.scss */
button, select {
  text-transform: none;
}

/* line 4, ../sass/reset.scss */
button, html input[type="button"], input[type="reset"], input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
  *overflow: visible;
}

/* line 4, ../sass/reset.scss */
button[disabled], html input[disabled] {
  cursor: default;
}

/* line 4, ../sass/reset.scss */
input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
  *height: 13px;
  *width: 13px;
}

/* line 4, ../sass/reset.scss */
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

/* line 4, ../sass/reset.scss */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/* line 4, ../sass/reset.scss */
button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* line 4, ../sass/reset.scss */
textarea {
  overflow: auto;
  vertical-align: top;
}

/* line 4, ../sass/reset.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* line 5, ../sass/reset.scss */
h1, h2, h3, h4, h5, h6, ul, ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Custom resets */
/* Font size: Default is 16px. Divide the pixel size you want by 10 to get rem value (1.8rem = 18px) */
/* line 10, ../sass/reset.scss */
html {
  font-size: 62.5%;
}

/* line 14, ../sass/reset.scss */
body {
  font-size: 1.6rem;
}

/* line 18, ../sass/reset.scss */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media all and (max-width: 500px) {
  /* line 25, ../sass/reset.scss */
  .notsmall, .medium-only, .large-only {
    display: none;
  }
}
@media all and (min-width: 500px) {
  /* line 29, ../sass/reset.scss */
  .small-only {
    display: none;
  }
}
@media all and (min-width: 500px) and (max-width: 780px) {
  /* line 33, ../sass/reset.scss */
  .large-only {
    display: none;
  }
}
@media all and (min-width: 780px) and (1025px) {
  /* line 37, ../sass/reset.scss */
  .medium-only {
    display: none;
  }
}
/* Font definitions - Put font files in /assets/css/fonts/ */
@font-face {
  font-family: 'icomoon';
  src: url("fonts/icomoon.eot");
  src: url("fonts/icomoon.eot?#iefix") format("embedded-opentype"), url("fonts/icomoon.woff") format("woff"), url("fonts/icomoon.ttf") format("truetype"), url("fonts/icomoon.svg#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'roboto';
  src: url("fonts/roboto-lightitalic-webfont.eot");
  src: url("fonts/roboto-lightitalic-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/roboto-lightitalic-webfont.woff") format("woff"), url("fonts/roboto-lightitalic-webfont.ttf") format("truetype"), url("fonts/roboto-lightitalic-webfont.svg#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'roboto slab';
  src: url("fonts/robotoslab-regular-webfont.eot");
  src: url("fonts/robotoslab-regular-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/robotoslab-regular-webfont.woff") format("woff"), url("fonts/robotoslab-regular-webfont.ttf") format("truetype"), url("fonts/robotoslab-regular-webfont.svg#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'dice';
  src: url("fonts/dice-webfont.eot");
  src: url("fonts/dice-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/dice-webfont.woff") format("woff"), url("fonts/dice-webfont.ttf") format("truetype"), url("fonts/dice-webfont.svg#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}

/* Variables */
/* Site mixins */
/* Glyphs */
/* Responsive */
/* Utility */
/* line 114, ../sass/_vars.scss */
#layout:after, #layout-content:after {
  content: "";
  display: table;
  clear: both;
}

/* line 15, ../sass/main.scss */
#layout {
  max-width: 1024px;
}
@media all and (min-width: 1025px) {
  /* line 15, ../sass/main.scss */
  #layout {
    margin-left: 6%;
  }
}

/* line 23, ../sass/main.scss */
header {
  background-color: #000;
  color: #fff;
}
/* line 114, ../sass/_vars.scss */
header:after {
  content: "";
  display: table;
  clear: both;
}
/* line 28, ../sass/main.scss */
header .logo {
  max-width: 100%;
}
/* line 32, ../sass/main.scss */
header span {
  position: absolute;
  top: 0;
  left: -9999px;
}

/* line 37, ../sass/main.scss */
h1, h2, h3 {
  font-family: roboto,arial,helvetica;
  text-transform: uppercase;
  font-weight: normal;
}

/* line 42, ../sass/main.scss */
#iocontainer {
  position: relative;
}

/* line 47, ../sass/main.scss */
label {
  font-family: 'roboto slab',arial,helvetica;
  font-weight: normal;
  display: block;
  margin: 8px 0 2px 0;
}

/* line 53, ../sass/main.scss */
input[type=text], input[type=tel] {
  font-size: 2rem;
  width: 100%;
}

/* line 58, ../sass/main.scss */
input[type=radio] {
  display: none;
}

/* line 62, ../sass/main.scss */
span.radio {
  font-size: 1.8rem;
  float: left;
  width: 30%;
  text-align: center;
}
/* line 68, ../sass/main.scss */
span.radio input[type=radio] + label {
  cursor: pointer;
  background: none;
}
/* line 73, ../sass/main.scss */
span.radio label:last-child {
  border: none;
  background-color: #000;
}
/* line 75, ../sass/main.scss */
span.radio input[type=radio]:checked + label {
  background-image: none;
  color: #fff;
  border-radius: 3px;
}

/* line 82, ../sass/main.scss */
.button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  border-radius: 0;
  border: solid 1px #ccc;
  background: none;
  font-family: 'roboto slab',arial,helvetica;
  font-weight: normal;
  display: block;
  text-decoration: none;
  text-align: center;
  font-size: 2rem;
  border-radius: 3px;
  background-color: #090;
  border-color: #060;
  color: #fff;
  padding: .8em;
  width: 100%;
  margin-top: 30px;
}

/* line 98, ../sass/main.scss */
x.adspace {
  display: none;
}

/* line 99, ../sass/main.scss */
.adspace small {
  padding: 2px;
  color: #999;
  text-align: center;
  display: block;
  font-size: 1.1rem;
  font-family: verdana,arial,helvetica,sans-serif;
}

/* line 102, ../sass/main.scss */
#overview span.bg {
  color: #fff;
  padding: 0 4px;
  border-radius: 2px;
}
/* line 107, ../sass/main.scss */
#overview span.bg.attack {
  background-color: #b81212;
}
/* line 111, ../sass/main.scss */
#overview span.bg.defend {
  background-color: #2e7ce8;
}

/* line 117, ../sass/main.scss */
#content {
  font-family: 'roboto slab',arial,helvetica;
  font-weight: normal;
}
/* line 122, ../sass/main.scss */
#content .story li {
  font-size: 2rem;
  margin-bottom: 12px;
}
/* line 127, ../sass/main.scss */
#content .story .icon:before {
  font-size: 3rem;
  padding-right: 6px;
  color: #333;
}
/* line 133, ../sass/main.scss */
#content .story .phone:before {
  font-family: "icomoon";
  content: "\e001";
}
/* line 137, ../sass/main.scss */
#content .story .tablet:before {
  font-family: "icomoon";
  content: "\e002";
}
/* line 141, ../sass/main.scss */
#content .story .desktop:before {
  font-family: "icomoon";
  content: "\e003";
}

/* line 149, ../sass/main.scss */
#results .rolls li {
  border-bottom: solid 1px #ccc;
  padding: 15px 0;
}
/* line 114, ../sass/_vars.scss */
#results .rolls li:after {
  content: "";
  display: table;
  clear: both;
}
/* line 114, ../sass/_vars.scss */
#results .rolls .attack:after, #results .rolls .defend:after {
  content: "";
  display: table;
  clear: both;
}
/* line 159, ../sass/main.scss */
#results .rolls .attack {
  padding-bottom: 15px;
  color: #c00;
}
/* line 164, ../sass/main.scss */
#results .rolls .dice {
  font-family: dice, arial, helvetica, sans-serif;
  font-size: 3.6rem;
  float: left;
  width: 35%;
  letter-spacing: 5px;
}
/* line 172, ../sass/main.scss */
#results .rolls .text {
  font-family: 'roboto slab',arial,helvetica;
  font-weight: normal;
  font-size: 2rem;
  float: left;
  width: 65%;
}

/* Phones < 480 */
@media all and (max-width: 500px) {
  /* line 114, ../sass/_vars.scss */
  #attack:after, #defend:after, #action:after, #overview:after {
    content: "";
    display: table;
    clear: both;
  }

  /* line 190, ../sass/main.scss */
  h1, h2, h3 {
    text-align: center;
  }

  /* line 194, ../sass/main.scss */
  header {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: center;
  }

  /* line 199, ../sass/main.scss */
  .adspace {
    text-align: center;
  }

  /* line 203, ../sass/main.scss */
  span.edge {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 0;
    padding-bottom: 0;
    display: block;
  }

  /* line 208, ../sass/main.scss */
  #container h2 {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #fff;
  }

  /* line 214, ../sass/main.scss */
  #attack h2 {
    background-color: #e61717;
  }

  /* line 219, ../sass/main.scss */
  #defend {
    padding-top: 20px;
  }
  /* line 221, ../sass/main.scss */
  #defend h2 {
    background-color: #5c99ed;
  }

  /* line 226, ../sass/main.scss */
  #action {
    margin-top: 20px;
    border-top: dotted 1px #333;
  }
  /* line 230, ../sass/main.scss */
  #action h2 {
    display: none;
  }
  /* line 234, ../sass/main.scss */
  #action .options {
    margin: 20px 0 30px;
    text-align: center;
  }

  /* line 240, ../sass/main.scss */
  #content {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /* line 243, ../sass/main.scss */
  #content .story .phone {
    display: none;
  }

  /* line 249, ../sass/main.scss */
  span.radio input[type=radio] + label {
    cursor: pointer;
    background: none;
    padding: .3em;
  }
  /* line 255, ../sass/main.scss */
  span.radio input[type=radio]:checked + label {
    background-color: #ccc;
    color: #333;
    border-radius: 3px;
  }

  /* line 263, ../sass/main.scss */
  #results {
    font-family: 'roboto slab',arial,helvetica;
    font-weight: normal;
  }
  /* line 266, ../sass/main.scss */
  #results #attack {
    text-align: center;
  }
  /* line 269, ../sass/main.scss */
  #results #attack h2 {
    font-size: 3rem;
  }
  /* line 273, ../sass/main.scss */
  #results #attack.defender h2 {
    background-color: #5c99ed;
  }
  /* line 279, ../sass/main.scss */
  #results #restart {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 6px;
    padding-bottom: 20px;
  }
  /* line 283, ../sass/main.scss */
  #results #overview {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 1.8rem;
    text-align: center;
  }
  /* line 288, ../sass/main.scss */
  #results #overview h2 {
    color: #000;
    font-size: 2rem;
  }
  /* line 293, ../sass/main.scss */
  #results #overview .savings {
    margin-top: 10px;
  }
  /* line 297, ../sass/main.scss */
  #results #overview .totals {
    line-height: 1.6em;
  }
  /* line 302, ../sass/main.scss */
  #results #content {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 30px;
    padding-bottom: 30px;
  }
  /* line 307, ../sass/main.scss */
  #results .rolls .dice {
    font-size: 3rem;
    width: 45%;
  }
  /* line 312, ../sass/main.scss */
  #results .rolls .text {
    font-size: 1.8rem;
    width: 55%;
  }
}
/* Tablet + Desktop */
@media all and (min-width: 500px) {
  /* line 329, ../sass/main.scss */
  header {
    position: relative;
    height: 70px;
  }
  /* line 334, ../sass/main.scss */
  header .logo {
    max-width: 100%;
    width: 180px;
    position: absolute;
    left: 20px;
    top: 8px;
  }
  /* line 343, ../sass/main.scss */
  header h1 {
    padding-right: 20px;
    font-size: 3rem;
    color: #999;
    position: absolute;
    left: 210px;
    bottom: 10px;
    line-height: 1em;
  }

  /* line 355, ../sass/main.scss */
  #container {
    border-bottom: solid 1px #333;
  }
  /* line 114, ../sass/_vars.scss */
  #container:after {
    content: "";
    display: table;
    clear: both;
  }

  /* line 362, ../sass/main.scss */
  #attack, #defend, #action {
    float: left;
    height: 280px;
    padding: 0 20px 0 20px;
    color: #fff;
  }

  /* line 370, ../sass/main.scss */
  h2 {
    padding-top: 15px;
    text-align: right;
    font-size: 4.6rem;
    font-weight: normal;
    line-height: 1em;
  }

  /* line 379, ../sass/main.scss */
  #attack {
    background-color: #e61717;
    width: 34%;
    padding-right: 30px;
    position: relative;
  }
  /* line 385, ../sass/main.scss */
  #attack:after {
    content: "";
    position: absolute;
    z-index: 99;
    right: -25px;
    width: 0px;
    top: 0;
    height: 0px;
    border-style: solid;
    border-width: 140px 0 140px 25px;
    border-color: transparent transparent transparent #e61717;
  }
  /* line 398, ../sass/main.scss */
  #attack input[type=radio]:checked + label {
    background-color: #890e0e;
  }

  /* line 403, ../sass/main.scss */
  #defend {
    background-color: #5c99ed;
    position: relative;
    padding-left: 50px;
    width: 36%;
  }
  /* line 409, ../sass/main.scss */
  #defend input[type=radio]:checked + label {
    background-color: #1763cc;
  }

  /* line 414, ../sass/main.scss */
  #action {
    text-align: center;
    width: 30%;
    float: left;
    background-color: #D1D1D1;
    background: url(../../bg.jpg) right top repeat #efefef;
  }
  /* line 421, ../sass/main.scss */
  #action label {
    color: #333;
  }
  /* line 425, ../sass/main.scss */
  #action .options {
    font-family: 'roboto slab',arial,helvetica;
    font-weight: normal;
    margin-top: 20px;
    font-size: 1.4rem;
  }

  /* line 433, ../sass/main.scss */
  #content {
    position: relative;
    margin-top: 20px;
    text-align: left;
  }
  /* line 114, ../sass/_vars.scss */
  #content:after {
    content: "";
    display: table;
    clear: both;
  }
  /* line 439, ../sass/main.scss */
  #content .story {
    margin-right: 350px;
    padding-left: 20px;
    font-size: 1.6rem;
  }
  /* line 444, ../sass/main.scss */
  #content .story h3 {
    font-size: 2.6rem;
    margin: 15px 0;
  }
  /* line 449, ../sass/main.scss */
  #content .story li {
    font-size: 2rem;
    margin-bottom: 12px;
  }
  /* line 454, ../sass/main.scss */
  #content .story .icon:before {
    font-size: 3rem;
    padding-right: 6px;
    color: #333;
  }
  /* line 460, ../sass/main.scss */
  #content .story .desktop {
    display: none;
  }
  /* line 466, ../sass/main.scss */
  #content .adspace {
    position: absolute;
    top: 0;
    right: 20px;
  }

  /* RESULTS */
  /* line 479, ../sass/main.scss */
  #results #attack {
    text-align: center;
    padding-top: 50px;
  }
  /* line 483, ../sass/main.scss */
  #results #attack h2 {
    text-align: center;
  }
  /* line 487, ../sass/main.scss */
  #results #attack h3 {
    font-family: 'roboto slab',arial,helvetica;
    font-weight: normal;
  }
  /* line 491, ../sass/main.scss */
  #results #attack.attacker {
    background-color: #e61717;
  }
  /* line 495, ../sass/main.scss */
  #results #attack.defender {
    background-color: #5c99ed;
  }
  /* line 498, ../sass/main.scss */
  #results #attack.defender:after {
    border-color: transparent transparent transparent #5c99ed;
  }
  /* line 505, ../sass/main.scss */
  #results #content h3 {
    font-size: 2.6rem;
  }
  /* line 510, ../sass/main.scss */
  #results #restart {
    padding: 0 20px;
  }
  /* line 513, ../sass/main.scss */
  #results #restart .button {
    margin: 20px 0;
    font-size: 2.4rem;
    padding: .8em;
  }

  /* line 524, ../sass/main.scss */
  #overview {
    font-family: 'roboto slab',arial,helvetica;
    font-weight: normal;
    background: url(../../bg.jpg) right top repeat #efefef;
    background-color: #efefef;
    height: 280px;
    padding: 30px 20px 0 42%;
  }
  /* line 531, ../sass/main.scss */
  #overview h2 {
    font-size: 3rem;
    text-align: left;
  }
  /* line 536, ../sass/main.scss */
  #overview .totals, #overview .savings {
    font-size: 2.3rem;
    line-height: 1.6em;
  }
  /* line 541, ../sass/main.scss */
  #overview .totals {
    margin: 15px 0;
  }
}