html {
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

.clearfix:after, .controls ul:after, .col-container:after {
  content: "";
  display: table;
  clear: both; }

body {
  margin: 0;
  font-size: 1em;
  background: #fff;
  font-family: Optima,Segoe,"Segoe UI",Candara,Calibri,Arial,sans-serif;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

p {
  margin: 0; }

input[type='range'] {
  margin-top: 1rem;
  width: 100%; }

input[type='checkbox'] {
  font-size: 1.5em;
  padding: 0.5em; }

textarea, #castle-history-url-string-container, #castle-history-data-string-container {
  width: 100%; }

@media screen and (max-width: 230px) {
  .stats-url {
    display: none; }

  .buildmode, .controls {
    display: none; } }
.buildmode, .controls {
  background: rgba(255, 255, 255, 0.85); }
  @media screen and (min-width: 990px) {
    .buildmode, .controls {
      background: rgba(255, 255, 255, 0.95); } }

.buildmode {
  padding: 0.15rem 1rem;
  position: fixed;
  top: 0;
  right: 1em;
  z-index: 200; }
  .buildmode input {
    float: right; }
  @media screen and (min-width: 990px) {
    .buildmode {
      width: 275px;
      z-index: 10;
      top: 0;
      right: 110px; } }

#stats-container {
  list-style: none;
  padding: 0; }

.explore-gallery-button {
  background: #53a7ea;
  color: #fff;
  padding: 5px 10px;
  text-decoration: none; }

#starting-point-button {
  width: 100%;
  background: none;
  cursor: pointer;
  border: none; }

@media screen and (max-width: 990px) and (-webkit-min-device-pixel-ratio: 2) {
  .fixed-controls {
    position: fixed;
    bottom: 0;
    left: 0; } }

.controls {
  list-style: none;
  padding: 1.5em 3.5em;
  z-index: 10;
  width: 100%;
  z-index: 100; }
  @media screen and (min-width: 990px) {
    .controls {
      position: fixed;
      padding: 1.5rem;
      box-shadow: -1px 1px 4px 0px #666;
      width: 275px;
      left: auto;
      right: 110px;
      top: 40px;
      bottom: auto; } }
  .controls input, .controls textarea {
    display: block;
    width: 100%; }
  .controls ul {
    list-style: none;
    padding: 0;
    margin: 0; }
    .controls ul li {
      margin-top: 10px; }
      .controls ul li:first-child {
        margin-top: 0; }
    .controls ul button {
      width: 100%;
      display: block;
      text-align: center; }

.clear-all-button {
  background: #aa0000;
  color: #fff;
  display: block;
  width: 100%; }

.col-container {
  margin: 1em auto; }
  .col-container:hover button {
    opacity: 1; }
  .col-container:first-child {
    margin-top: 0; }
  .col-container span {
    float: left; }
  .col-container button {
    opacity: 0; }

.control-group {
  width: 45%;
  margin-left: 10%;
  margin-top: 10%;
  float: left; }
  .control-group:first-child {
    margin-left: 0; }
  .control-group:nth-child(2n + 1) {
    margin-left: 0; }
  .control-group:nth-child(1) {
    margin-top: 0; }
  .control-group:nth-child(2) {
    margin-top: 0; }

.control-group-3 {
  width: 26.66667%;
  margin-left: 10%;
  margin-top: 10%;
  float: left; }
  .control-group-3:first-child {
    margin-left: 0; }
  .control-group-3:nth-child(3n + 1) {
    margin-left: 0; }
  .control-group-3:nth-child(1) {
    margin-top: 0; }
  .control-group-3:nth-child(2) {
    margin-top: 0; }
  .control-group-3:nth-child(3) {
    margin-top: 0; }

.stats-url {
  padding: 1.5rem;
  background: #fff;
  z-index: -1;
  position: relative;
  box-shadow: -1px 1px 4px 0px #666;
  width: 100%; }
  .stats-url iframe {
    width: 100%;
    height: 158px; }
  .stats-url label {
    display: block; }
  @media screen and (min-width: 990px) {
    .stats-url {
      position: absolute;
      opacity: 1;
      z-index: 10;
      top: 10px;
      left: 10px;
      width: 275px; } }

.iframe-link {
  padding: 1em;
  display: block;
  margin: 1em 0 0;
  background: #53a7ea; }

#group-display .col-container {
  margin: 0 auto; }

.active-container {
  background: #53a7ea; }
  .active-container button {
    opacity: 1 !important;
    display: block; }

#back-home {
  display: none; }

.hash #iframe-history-container, .hash #create-history-state-button, .hash #preview-display, .hash .codepen-form {
  display: none; }
.hash #back-home {
  display: block; }

.hash-iframe .preview-content, .hash-iframe .buildmode, .hash-iframe #preview-display, .hash-iframe .codepen-form {
  display: none !important; }

#preview-display {
  background: #ececec; }

.block-section-container {
  position: relative;
  width: 100%; }
  .block-section-container .col-container .build-block:first-child {
    margin-left: 0 !important; }

.build-block {
  display: block;
  float: left; }

@media screen and (max-width: 990px) and (-webkit-min-device-pixel-ratio: 2) {
  .controls .col-container {
    margin: 2em 0; }

  hr {
    display: none; }

  label {
    display: none; }

  input[type='range'] {
    -webkit-appearance: none;
    height: 6.5em;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    padding: 2.5em;
    background: #cecece; }

  input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 6em;
    background: #fff;
    height: 6em;
    -webkit-border-radius: 50%; }

  .control-group-3 {
    display: none; }

  input[type='button'] {
    padding: 2em;
    font-size: 2.5em;
    margin-top: 1em;
    margin-bottom: 1em; } }
@media screen and (min-width: 990px) {
  #display .col-container, #preview-display .col-container {
    cursor: pointer; }
    #display .col-container:hover, #preview-display .col-container:hover {
      outline: 2px solid #53a7ea;
      position: relative;
      z-index: 2;
      box-shadow: inset 0 0 0 25px #53a7ea; }

  #display section:hover button, #preview-display section:hover button {
    opacity: 1; }
  #display section:hover .col-container, #preview-display section:hover .col-container {
    outline: 2px solid #53a7ea;
    position: relative;
    z-index: 2;
    box-shadow: inset 0 0 0 25px #53a7ea; } }
#display button, #preview-display button {
  position: absolute;
  cursor: pointer;
  top: 0;
  padding: 0.5em;
  z-index: 5;
  background: #fff;
  opacity: 0;
  right: 30%;
  background: #aa0000;
  border: none;
  color: #fff; }

/*# sourceMappingURL=style.css.map */