/* ===== BASE ===== */

body {
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
  color: #333;
  margin: 0;
}

h1, h2, h3, h4, h5 {
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
}

p, ul, ol {
  font-family: "Times New Roman", serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.02em;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
  text-rendering: optimizeLegibility;
  word-wrap: break-word;
  margin: 0 0 30px 0;
}

em {
  font-weight: 200;
}

li {
  margin-bottom: 5px;
}

img {
  width: 100%;
}

a {
  font-weight: bold;
  text-decoration: none;
  color: #4285f4;
}

a:hover, a:focus {
  text-decoration: underline;
  color: #3369e8;
}

iframe.embedded-youtube {
  display: block;
  margin: 20px auto;
}

.link_inherit_color {
  color: inherit;
}

.container {
  max-width: 1000px;
  padding: 10px;
  display: block;
  margin: auto;
}

.two-col {
  display: inline-block;
  width: calc(50% - 20px);
  vertical-align: top;
  padding: 10px;
}

.two-thirds-col {
  display: inline-block;
  width: calc(67% - 20px);
  vertical-align: top;
  padding: 10px;
}

.one-third-col {
  display: inline-block;
  width: calc(33% - 20px);
  vertical-align: top;
  padding: 10px;
}

.image-inline {
  display: inline-block;
  width: initial;
}

.image-block-center {
  display: block;
  width: initial;
  margin: auto;
  max-width: 100%;
}

.block-center {
  display: block;
  margin: auto;
}

.hidden {
  display: none;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.portrait-circle {
  border-radius: 50%;
}

.caption-centered {
  font-size: 14px;
  text-align: center;
  display: block;
  font-style: italic;
  color: #666;
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
  margin: 5px;
}

.blockquote-code {
  border: 1px solid #666;
  padding: 15px;
  background-color: #eee;
  color: #666;
  font-size: 12px;
}

/* ===== NAVBAR ===== */

.navbar {
  width: 100%;
  height: 42px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  position: fixed;
  z-index: 1000;
}

.navbar-placeholder {
  height: 43px;
}

.navbar-container {
  max-width: 1000px;
  margin: auto;
  display: flex;
}

.navbar-cell {
  width: 25%;
  font-size: 16px;
  padding: 12px 10px;
  font-weight: normal;
  box-sizing: border-box;
}

.navbar-cell:hover {
  text-decoration: none;
  background-color: #eee;
}

/* ===== HOME ===== */

.home-links div {
  padding: 5px 10px;
}

.home-portrait {
  border-radius: 5px;
}

/* ===== ABOUT ===== */

.about-container {
  width: calc(100% - 162px);
  border-left: 1px solid #aaa;
  border-right: 1px solid #aaa;
  display: inline-block;
  padding: 40px 80px;
}

.about-container p {
  margin-bottom: 40px;
}

.about-tabs {
  width: 100%;
  display: block;
  margin: auto;
  border-bottom: 1px solid #aaa;
}

.about-tab {
  display: inline-block;
  background-color: #eee;
  color: #999;
  width: 100px;
  margin: 0 10px;
  padding: 10px;
  border-radius: 5px 5px 0 0;
  text-align: center;
  pointer-events: all;
}

.about-tab:hover {
  cursor: pointer;
  background-color: #ccc;
}

.about-tabs.about-page-bottom {
  border-bottom: 0px;
  border-top: 1px solid #aaa;
}

.about-tabs.about-page-bottom .about-tab {
  border-radius: 0 0 5px 5px;
}

.about-tab.tab-active {
  background-color: #aaa;
  color: #fff;
}

.about-read-more {
  color: #4285f4;
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-size: 14px;
  cursor: pointer;
}

.about-read-more:hover, .about-read-more:focus {
  color: #3369e8;
}

/* ===== INCLUDES / BUTTONS ===== */

.button {
  font-weight: 400 !important;
  background-color: #007a95;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  font-size: 14px;
  vertical-align: middle;
  padding: .7em 1.2em;
  border-radius: 5px;
  border: 0;
}

.button:hover {
  background-color: #3369e8;
  color: white;
  text-decoration: none;
  cursor: pointer;
}

.button:focus {
  color: #fff;
}

.button-block {
  display: block;
  width: 100%;
}

.button-disabled {
  background-color: #999;
}

.button-disabled:hover {
  cursor: default;
  background-color: #999;
}

/* ===== ESSAYS ===== */

.essays {
  max-width: 800px;
  padding: 10px;
  display: block;
  margin: auto;
}

.essays--index-heading {
  font-size: 1.4rem;
}

.essays--index-dek {
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: 200;
  margin-bottom: 10px;
}

/* ===== SLIDESHOW ===== */

.slideshow {
  overflow: hidden;
  width: 100%;
  background-color: #f3f3f4;
  padding-bottom: 12px;
  margin-bottom: 30px;
}

.slideshow-body {
  list-style: none;
  position: relative;
  width: 300%;
  overflow: hidden;
  margin-top: 20px;
  margin-bottom: 20px;
}

.slideshow-item {
  font-size: 14px;
  font-weight: 400;
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 10px;
}

.slideshow-item strong {
  font-weight: bold !important;
}

.slideshow-item h3, .slideshow-item h4 {
  margin: 0 0 15px 0 !important;
}

.slideshow-buttons {
  text-align: center;
}

.slideshow-button-left, .slideshow-button-right {
  font-size: 70px;
  color: #4285f4;
  padding: 10px 50px;
}

.slideshow-button-left:hover, .slideshow-button-right:hover {
  cursor: pointer;
  color: #3369e8;
}

.slideshow-button-disabled {
  color: #999;
}

.slideshow-button-disabled:hover {
  cursor: default;
  color: #999;
}

.slideshow-button-progress {
  font-size: 36px;
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
}

.slideshow-image {
  width: initial;
  max-width: 100%;
  display: block;
  margin: auto;
}

/* ===== FORMS ===== */

.form-container {
  max-width: 500px;
  width: 100%;
  margin: auto;
  display: block;
}

.form-row {
  margin: 20px 0;
}

.form-row label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.form-row input {
  display: block;
  width: 100%;
  padding: 5px;
}

.form-row input.text-field {
  display: block;
  font-size: 14px;
  height: 20px;
  width: 100%;
  border: 1px solid #ccc;
}

.form-row textarea {
  display: block;
  width: 100%;
  padding: 5px;
  height: 160px;
}

/* ===== PAGINATION ===== */

.pagination {
  padding: 5px;
  display: inline-block;
}

.pagination * {
  padding: 3px 3px;
}

.pagination .disabled {
  color: #999;
}

.pagination .current {
  font-weight: bold;
  font-style: normal;
}

/* ===== MAGIC CARDS ===== */
/* Placeholder — will be populated when game views are ported */

/* ===== RESPONSIVE ===== */

@media screen and (max-width: 767px) {
  .two-col,
  .two-thirds-col,
  .one-third-col {
    width: calc(100% - 20px);
  }

  iframe.embedded-youtube {
    width: 100%;
  }

  .image-block-center {
    width: 100%;
  }

  .about-container {
    width: calc(100% - 20px);
    padding: 40px 10px;
    border: none;
  }

  .about-tab {
    width: calc(20% - 20px);
    font-size: 12px;
    margin: 0 3px;
    padding: 10px 5px;
  }

  .hidden-phone {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .hidden-non-phone {
    display: none !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .hidden-tablet {
    display: none !important;
  }

  .slideshow-item .slideshow--desktop-container {
    width: 100%;
  }
}

@media screen and (min-width: 992px) {
  .hidden-desktop {
    display: none !important;
  }

  .slideshow-item .slideshow--desktop-container {
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
  }
}

/* ===== WEEK ONE ===== */

.week_one-container {
  max-width: 1000px;
  margin: auto;
  background-color: #eee;
}

.week_one-container .gold-display {
  font-size: 24px;
  text-align: right;
  padding: 10px 20px;
}

.week_one-container .face-display-portrait {
  z-index: 1;
  position: absolute;
  background: url("https://br80.s3-us-west-1.amazonaws.com/brady/games/img/GameFaces.png");
  width: 128px;
  height: 128px;
}

.week_one-container .face-selected { background-color: rgba(0, 0, 255, 0.1); }
.week_one-container .face-displays { display: block; }

.week_one-container .face-display {
  display: inline-block;
  width: calc(25% - 10px);
  margin: 5px;
  vertical-align: top;
}

.week_one-container .face-display-container {
  width: 128px;
  height: 128px;
  display: inline-block;
  border-radius: 50%;
}

.week_one-container .face-display-circle {
  position: absolute;
  width: 94px;
  height: 94px;
  background-color: #ffee9c;
  border-radius: 50%;
  margin: 18px;
  z-index: 0;
}

.week_one-container .face-display-actions {
  position: absolute;
  display: inline-block;
}

.week_one-container .face-display-actions .button { margin: 5px; }

.week_one-container .face-display-meter-container {
  width: 64px;
  margin-left: 32px;
  height: 10px;
  display: block;
  background-color: #ccc;
  border: 1px solid #999;
}

.week_one-container .face-display-health {
  background-color: #f33;
  width: 100%;
  height: 100%;
  display: block;
}

.week_one-container .face-display-stats {
  margin-top: 5px;
  list-style: none;
  padding-left: 10px;
}

.week_one-container .face-display-food-buttons {
  position: absolute;
  width: 100%;
  height: 50px;
  margin-top: -50px;
}

.week_one-container .face-display-food-button {
  height: 50px;
  width: 30px;
  padding: 0 3px;
  margin-right: 3px;
  vertical-align: top;
  text-align: center;
  background-color: #ccc;
  border: 1px solid #666;
  border-radius: 3px;
  display: inline-block;
}

.week_one-container .face-display-food-button img { width: 100%; }
.week_one-container .face-display-food-button:hover { background-color: #ddd; cursor: pointer; }
.week_one-container .face-display-food-button-disabled img { opacity: 0.3; }
.week_one-container .face-display-food-button-disabled:hover { cursor: default; background-color: #ccc; }

.week_one-container .battlefield {
  width: 1000px;
  height: 1500px;
  background-color: #99b;
  position: relative;
}

.week_one-container .battlefield-contested {
  width: 1000px;
  position: absolute;
  height: 1000px;
  top: 250px;
  background-color: #9b9;
}

.week_one-container .face-battlefield-portrait {
  width: 128px;
  height: 128px;
  background: url("https://br80.s3-us-west-1.amazonaws.com/brady/games/img/GameFaces.png");
  z-index: 2;
  position: absolute;
}

.week_one-container .face-battlefield-container {
  position: absolute;
  width: 128px;
  height: 128px;
  display: block;
  border-radius: 50%;
}

.week_one-container .face-battlefield-circle {
  position: absolute;
  width: 94px;
  height: 94px;
  background-color: #ffee9c;
  border-radius: 50%;
  margin: 18px;
  z-index: 1;
}

.week_one-container .face-battlefield-circle-color-enemy { background-color: #ffae5c; }

.week_one-container .face-battlefield-vision {
  position: absolute;
  width: 394px;
  height: 394px;
  background-color: #ccc;
  opacity: 0.3;
  margin: -132px;
  z-index: 0;
  border-radius: 50%;
}

.week_one-container .face-battlefield-team-color {
  position: absolute;
  width: 106px;
  height: 106px;
  border-radius: 50%;
  margin: 11px;
  opacity: 0.8;
  z-index: 0;
}

.week_one-container .face-battlefield-team-color-blue { background-color: #66f; }
.week_one-container .face-battlefield-team-color-red { background-color: red; }

.week_one-container .face-battlefield-meter-container {
  width: 50%;
  max-width: 128px;
  height: 3px;
  display: block;
  background-color: #ccc;
  border: 1px solid #999;
  margin: 118px 0 0 25%;
}

.week_one-container .fireshot {
  width: 32px;
  height: 32px;
  z-index: 20;
  position: absolute;
}

.week_one-container .crystal {
  width: 64px;
  height: 64px;
  z-index: 0;
  position: absolute;
  pointer-events: none;
}

.week_one-container .crystal-battlefield-meter-container {
  width: 60%;
  max-width: 128px;
  height: 3px;
  display: block;
  background-color: #ccc;
  border: 1px solid #999;
  margin: 118px 20% 0 20%;
}

.week_one-container .crystal-battlefield-meter-container:last-child { margin-top: 0; }

.week_one-container .crystal-battlefield-health {
  background-color: #f33;
  width: 100%;
  height: 100%;
  display: block;
}

.week_one-container .flag {
  width: 100px;
  height: 100px;
  z-index: 0;
  position: absolute;
  pointer-events: none;
}

.week_one-container .flag img { width: 100%; }

.week_one-container .flag-battlefield-meter-container {
  width: 80%;
  max-width: 100px;
  height: 3px;
  display: block;
  background-color: #ccc;
  border: 1px solid #999;
  margin: 118px 10% 0 10%;
}

.week_one-container .flag-battlefield-meter-container:last-child { margin-top: 0; }

.week_one-container .flag-battlefield-health {
  background-color: #f33;
  width: 100%;
  height: 100%;
  display: block;
}

.week_one-container .gold-earned-text {
  color: #ffd700;
  position: absolute;
  font-size: 24px;
  z-index: 50;
}

.week_one-container .end-text {
  position: fixed;
  font-size: 48px;
  z-index: 100;
  font-weight: bold;
  background-color: white;
  display: block;
  text-align: center;
  opacity: 0.7;
  top: 20%;
  left: 25%;
  width: 50%;
  padding: 30px 0;
}

.week_one-container .face-battlefield-buttons {
  width: 128px;
  margin-top: -26px;
  z-index: 50;
}

.week_one-container .face-battlefield-buttons .button {
  opacity: 0.5;
  display: inline-block;
  width: 40px;
  padding: 5px 0;
  margin-right: 4px;
}

.week_one-container .face-battlefield-buttons .button:last-child { margin-right: 0; }
.week_one-container .button-selected { background-color: #339aff !important; opacity: 1 !important; }

/* ===== WEEK TWO ===== */

.week_two-container .d3-algebra-boat-axes { width: 1000px; display: block; margin: auto; }

.week_two-container .axis path,
.week_two-container .axis line { fill: none; stroke: black; shape-rendering: crispEdges; opacity: 0.3; }
.week_two-container .axis text { font-family: sans-serif; font-size: 11px; opacity: 0.3; }
.week_two-container .grid .tick { stroke: lightgrey; opacity: 0.7; }
.week_two-container .grid path { stroke-width: 0; }
.week_two-container .boat-image { position: absolute; }

.week_two-container .algebra-boat-footer-container {
  position: fixed;
  bottom: 0;
  background-color: #eee;
  height: 100px;
  width: 100%;
}

.week_two-container .algebra-boat-footer {
  max-width: 1000px;
  display: block;
  margin: auto;
  background-color: #ddd;
  height: 100px;
  padding-left: 10px;
}

.week_two-container .algebra-boat-footer-placeholder { height: 100px; display: block; }

.week_two-container .algebra-boat-footer-equation-text {
  display: inline-block;
  margin: 0 10px;
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  color: #359;
}

.week_two-container .algebra-boat-footer-text-field {
  display: inline-block;
  margin: 20px 0;
  height: 50px;
  width: 100px;
  font-size: 36px;
}

.week_two-container .algebra-boat-footer-fire-button {
  vertical-align: top;
  display: inline-block;
  height: 30px;
  margin: 20px;
  font-size: 20px;
  padding: 10px;
  max-width: 100px;
}

.week_two-container .algebra-boat-footer-tabs-container {
  position: fixed;
  bottom: 100px;
  width: 100%;
  display: block;
  margin: auto;
}

.week_two-container .algebra-boat-footer-tabs { max-width: 1000px; display: block; margin: auto; }

.week_two-container .algebra-boat-footer-tab {
  display: inline-block;
  background-color: #ccc;
  width: 100px;
  margin: 0 10px;
  padding: 10px;
  border-radius: 5px 5px 0 0;
  text-align: center;
}

.week_two-container .algebra-boat-footer-tab:hover { cursor: pointer; }
.week_two-container .algebra-boat-footer-tab.tab-active { background-color: #ddd; }

.week_two-container .cursor-x-guide { width: 1px; height: 10000px; background-color: #000; opacity: 0.1; position: absolute; pointer-events: none; }
.week_two-container .cursor-y-guide { width: 10000px; height: 1px; background-color: #666; opacity: 0.1; position: absolute; pointer-events: none; }
.week_two-container .fireshot { width: 32px; height: 32px; z-index: 20; position: absolute; }

.week_two-container .carrier-health-meter-container { width: 1000px; height: 5px; margin: auto; display: block; background-color: #ccc; border: 1px solid #999; }
.week_two-container .carrier-health { background-color: #f33; width: 100%; height: 100%; display: block; }
.week_two-container .algebra-boat-score { width: 1000px; margin: auto; display: block; text-align: right; padding: 5px; }

.week_two-container .end-text {
  position: fixed; font-size: 48px; z-index: 100; font-weight: bold; background-color: white; display: block; text-align: center; opacity: 0.7; top: 20%; left: 25%; width: 50%; padding: 30px 0;
}

/* ===== WEEK THREE ===== */

.week_three-container .week-three-js { width: 1000px; display: block; margin: auto; }
.week_three-container .axis path, .week_three-container .axis line { fill: none; stroke: black; shape-rendering: crispEdges; opacity: 0.3; }
.week_three-container .axis text { font-family: sans-serif; font-size: 11px; opacity: 0.3; }
.week_three-container .grid .tick { stroke: lightgrey; opacity: 0.7; }
.week_three-container .grid path { stroke-width: 0; }

.week_three-container .carrier-health-meter-container { width: 1000px; height: 5px; margin: auto; display: block; background-color: #ccc; border: 1px solid #999; }
.week_three-container .carrier-health { background-color: #f33; width: 100%; height: 100%; display: block; }

.week_three-container .footer-container { position: fixed; bottom: 0; background-color: #eee; height: 100px; width: 100%; }
.week_three-container .footer { max-width: 1000px; display: block; margin: auto; background-color: #ddd; height: 100px; padding: 20px; }
.week_three-container .footer-placeholder { height: 100px; display: block; }

.week_three-container .footer-tabs-container { position: fixed; bottom: 100px; width: 100%; display: block; margin: auto; pointer-events: none; }
.week_three-container .footer-tabs { max-width: 1000px; display: block; margin: auto; }

.week_three-container .footer-tab {
  display: inline-block; background-color: #ccc; width: 100px; margin: 0 10px; padding: 10px; border-radius: 5px 5px 0 0; text-align: center; pointer-events: all;
}
.week_three-container .footer-tab:hover { cursor: pointer; }
.week_three-container .footer-tab.tab-active { background-color: #ddd; }

.week_three-container .footer-inventory-item { display: inline-block; padding: 10px; font-size: 24px; }
.week_three-container .footer-inventory-button { vertical-align: top; display: inline-block; height: 24px; font-size: 20px; padding: 10px; margin: 0 5px; }
.week_three-container .footer-zoom-button { vertical-align: top; display: inline-block; height: 30px; width: 60px; margin: 10px; font-size: 20px; padding: 10px; max-width: 100px; }

.week_three-container .end-text {
  position: fixed; font-size: 48px; z-index: 100; font-weight: bold; background-color: white; display: block; text-align: center; opacity: 0.7; top: 20%; left: 25%; width: 50%; padding: 30px 0;
}
.week_three-container .no-click { pointer-events: none; }
.week_three-container .score-text { display: block; width: 1000px; margin: auto; height: 30px; }
.week_three-container .point-score { font-size: 18px; float: right; }

/* ===== WEEK FIVE ===== */

.hr-ball-arena {
  max-width: 800px;
  padding: 30px 10px 20px 10px;
  border: 1px black solid;
  display: block;
  margin: auto;
}

.hr-ball-arena .hr-ball-gun { width: 20px; height: 60px; display: block; background-color: green; position: absolute; top: -11px; left: calc(50% - 10px); }
.hr-ball-arena .hr-ball { background-color: orange; border-radius: 50%; width: 20px; height: 20px; display: block; position: absolute; top: 10px; opacity: 0.8; left: calc(50% - 10px); z-index: 100; }
.hr-ball-arena .hr-paddle { display: block; width: 100px; height: 10px; position: absolute; margin-top: -5px; background-color: black; }
.hr-ball-arena .hr-click-circle { background-color: cyan; border-radius: 50%; width: 50px; height: 50px; opacity: 0.5; z-index: 100; position: absolute; pointer-events: none; }
.hr-ball-arena .hr-word-highlight { background-color: green; }
.hr-ball-arena .hr-word-highlight--red { background-color: red; }
.hr-ball-arena .hr-word-highlight--green { background-color: green; }

.hr-ball-arena .hr-ball-health-container { max-width: 800px; width: 100%; height: 5px; margin: auto; display: block; background-color: #ccc; border: 1px solid #999; position: fixed; top: 0; z-index: 100; }
.hr-ball-arena .hr-ball-health { background-color: #f33; width: 100%; height: 100%; display: block; }

.hr-ball-arena .end-text {
  position: fixed; font-size: 48px; z-index: 100; font-weight: bold; background-color: white; display: block; text-align: center; opacity: 1; border: 1px solid black; top: 20%; left: 25%; width: 50%; padding: 30px 0;
}

/* ===== WEEK TWELVE ===== */

.week_twelve-container .week_twelve-card { width: 150px; opacity: 0; }
.week_twelve-container .week_twelve-card-container { width: 150px; height: 200px; background-color: grey; border: 2px solid black; display: inline-block; }
.week_twelve-container .week_twelve-card-container:hover { cursor: pointer; }
.week_twelve-container .week_twelve-card-container.clicked:hover { cursor: none !important; }
.week_twelve-container .end-text {
  position: fixed; font-size: 48px; z-index: 100; font-weight: bold; background-color: white; display: block; text-align: center; opacity: 0.7; top: 20%; left: 25%; width: 50%; padding: 30px 0;
}

/* ===== WEEK EIGHTEEN ===== */

.week_eighteen-container .week_eighteen-card {
  width: 150px; height: 200px; opacity: 1; display: inline-block; background-color: grey; border: 2px solid black;
}
.week_eighteen-container .week_eighteen-card:hover { cursor: pointer; }
.week_eighteen-container .week_eighteen-card-container.clicked:hover { cursor: none !important; }

/* ===== WEEK TWENTY ONE ===== */

.week_twenty_one-scene { display: none; max-width: 800px; margin: 20px auto; }
.week_twenty_one-scene p { margin: 40px 0; }
.week_twenty_one-scene-show { display: block !important; }
.week_twenty_one-button { margin: 10px; max-width: 300px; margin: 10px auto; }
.week_twenty_one-event { color: red; }
.week_twenty_one-event p { max-width: 800px; margin: 20px auto; }

/* ===== WEEK TWENTY FIVE ===== */

.week_twenty_five-button { margin: 10px; max-width: 300px; margin: 10px auto; }
.week_twenty_five-question { display: none; max-width: 800px; margin: 20px auto; }
.week_twenty_five-question p { margin: 40px 0; }
.week_twenty_five-question-show { display: block !important; }

/* ===== WEEK TWENTY NINE ===== */

.week_twenty_nine-rose {
  z-index: 1;
  position: absolute;
  background: url("https://br80.s3-us-west-1.amazonaws.com/brady/games/img/Roses.png");
  width: 100px;
  height: 100px;
  background-color: #eee;
}

/* ===== MAGIC CARDS ===== */

.mtg-card { display: inline-block; width: 250px; height: 350px; position: relative; font-size: 16px; }
.mtg-card-large { width: 500px; height: 700px; font-size: 32px; }
.mtg-card-small { width: 125px; height: 175px; font-size: 8px; }

.mtg-card-template {
  z-index: 2; position: absolute; display: block; width: 100%; height: 100%; background-size: 100%; background-repeat: no-repeat;
}

.mtg-card-template--white_creature { background-image: url("https://br80.s3-us-west-1.amazonaws.com/brady/games/mtg/mtg_white_creature.png"); }
.mtg-card-template--blue_creature { background-image: url("https://br80.s3-us-west-1.amazonaws.com/brady/games/mtg/mtg_blue_creature.png"); }
.mtg-card-template--black_creature { background-image: url("https://br80.s3-us-west-1.amazonaws.com/brady/games/mtg/mtg_black_creature.png"); }
.mtg-card-template--red_creature { background-image: url("https://br80.s3-us-west-1.amazonaws.com/brady/games/mtg/mtg_red_creature.png"); }
.mtg-card-template--green_creature { background-image: url("https://br80.s3-us-west-1.amazonaws.com/brady/games/mtg/mtg_green_creature.png"); }
.mtg-card-template--artifact_creature { background-image: url("https://br80.s3-us-west-1.amazonaws.com/brady/games/mtg/mtg_artifact_creature.png"); }
.mtg-card-template--gold_creature { background-image: url("https://br80.s3-us-west-1.amazonaws.com/brady/games/mtg/mtg_gold_creature.png"); }
.mtg-card-template--white_spell { background-image: url("https://br80.s3-us-west-1.amazonaws.com/brady/games/mtg/mtg_white_spell.png"); }
.mtg-card-template--blue_spell { background-image: url("https://br80.s3-us-west-1.amazonaws.com/brady/games/mtg/mtg_blue_spell.png"); }
.mtg-card-template--black_spell { background-image: url("https://br80.s3-us-west-1.amazonaws.com/brady/games/mtg/mtg_black_spell.png"); }
.mtg-card-template--red_spell { background-image: url("https://br80.s3-us-west-1.amazonaws.com/brady/games/mtg/mtg_red_spell.png"); }
.mtg-card-template--green_spell { background-image: url("https://br80.s3-us-west-1.amazonaws.com/brady/games/mtg/mtg_green_spell.png"); }
.mtg-card-template--artifact { background-image: url("https://br80.s3-us-west-1.amazonaws.com/brady/games/mtg/mtg_artifact.png"); }
.mtg-card-template--gold_spell { background-image: url("https://br80.s3-us-west-1.amazonaws.com/brady/games/mtg/mtg_gold_spell.png"); }
.mtg-card-template--land { background-image: url("https://br80.s3-us-west-1.amazonaws.com/brady/games/mtg/mtg_land.png"); }

.mtg-card-cover { z-index: 1; position: absolute; margin-top: 15.8%; margin-left: 7.3%; width: 85%; height: 45%; }
.mtg-card-name { z-index: 2; margin-top: 7.2%; margin-left: 8.8%; font-size: 0.9em; position: absolute; font-family: "Beleren", "Helvetica Neue", "Helvetica", Arial, sans-serif; }
.mtg-card-type { z-index: 2; margin-top: 79.5%; margin-left: 8.4%; font-size: 0.65em; position: absolute; font-family: "Beleren", "Helvetica Neue", "Helvetica", Arial, sans-serif; }

.mtg-expansion-symbol { display: inline-block; width: 0.9em; height: 0.9em; position: absolute; z-index: 2; margin-top: 78.5%; margin-left: 86%; }

.mtg-card-text {
  font-family: "Times New Roman", serif; z-index: 2; margin-top: 86.5%; margin-left: 9%; width: 82%; font-size: 0.7em; position: absolute;
}
.mtg-card-text div { margin: 2% 0; }
.mtg-card-text--small { font-size: 0.5em; }
.mtg-card-text--large { font-size: 1em; }

.mtg-power-toughness { font-family: "Beleren", "Helvetica Neue", "Helvetica", Arial, sans-serif; position: absolute; z-index: 2; margin-top: 124.6%; margin-right: 7.4%; right: 0; font-size: 0.9em; width: 12.9%; text-align: center; }

.mtg-card-cost { margin-top: 7.2%; right: 8.8%; font-size: 0.9em; position: absolute; width: 50%; height: 10%; }
.mtg-card-cost .mtg-icon { float: right; }

.mtg-icon { width: 1.1em; height: 1.1em; z-index: 2; display: inline-block; opacity: 0; position: relative; background-size: 4.4em; background-image: url("https://br80.s3-us-west-1.amazonaws.com/brady/games/mtg/mtg_icon_sprites.png"); }
.mtg-icon-text { width: 0.75em; height: 0.75em; z-index: 2; display: inline-block; opacity: 0; position: relative; background-size: 3em; background-image: url("https://br80.s3-us-west-1.amazonaws.com/brady/games/mtg/mtg_icon_sprites.png"); }

.mtg-collector-number { color: #fff; font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif; position: absolute; z-index: 2; margin-top: 130%; margin-left: 7%; font-size: 0.35em; letter-spacing: 0.2em; }
.mtg-collector-rarity { color: #fff; font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif; position: absolute; z-index: 2; margin-top: 130%; margin-left: 24%; font-size: 0.35em; letter-spacing: 0.2em; }
.mtg-set-id { color: #fff; font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif; position: absolute; z-index: 2; margin-top: 132.8%; margin-left: 7%; font-size: 0.35em; letter-spacing: 0.2em; }

.mtg-artist { color: #fff; font-family: "Beleren Caps", "Helvetica Neue", "Helvetica", Arial, sans-serif; margin-top: 132.8%; margin-left: 24%; z-index: 2; font-size: 0.35em; position: absolute; text-decoration: none; }
.mtg-artist:hover { opacity: 0.8; color: #4285f4; text-decoration: underline; }

.mtg-copyright { color: #fff; font-family: "Times New Roman", serif; position: absolute; z-index: 2; margin-top: 133%; margin-right: 7%; right: 0; font-size: 0.35em; text-align: right; letter-spacing: 0.1em; text-decoration: none; }
.mtg-copyright:hover { opacity: 0.8; text-decoration: underline; }
.mtg-copyright-creature { margin-top: 133%; }

/* ===== FONT FACES ===== */

@font-face {
  font-family: "Beleren";
  src: url("https://br80.s3-us-west-1.amazonaws.com/brady/fonts/beleren-bold-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Beleren Caps";
  src: url("https://br80.s3-us-west-1.amazonaws.com/brady/fonts/belerensmallcaps-bold-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* ===== PHONE OVERRIDES FOR GAMES ===== */

@media screen and (max-width: 767px) {
  .week_one-container .face-display { width: calc(50% - 10px); }
  .week_two-container .algebra-boat-footer-text-field { width: 50px; }
  .week_two-container .algebra-boat-footer-tab { width: 70px; margin: 0 5px; }
  .week_three-container .footer-tab { width: 70px; margin: 0 5px; }
}