.cards-table h2,
.cards-table h3,
.cards-table h4 {
  font-size: 1em;
  line-height: 1em;
  margin: 0;
}

.cards-table h2 {
  font-weight: bold;
  margin-bottom: 1em;
}

.cards-table h3 {
  font-weight: bold;
  margin-bottom: 1em;
}

.cards-table h4 {
  text-transform: uppercase;
}
/* ADMIN LAYOUT */
.white-background-layout .page-background {
  background-color: var(--white);
  border-radius: var(--corner);
  box-shadow: var(--shadow);
  margin-bottom: 30px;
  overflow: auto;
  padding: 2% 4%;
}

.white-background-layout img {
  margin: 0 auto;
  max-height: 100px;
  max-width: 100px;
}


/* DEVISE VIEWS */
.devise-background {
  background-color: var(--warm-beige);
  background-image: image-url(/assets/paper_modal-77fa4eb8ae0ecc1e3d370b368fdf6f1f38ce308e3058aac03306da6dfa7a4b47.png);
  background-size: 100%;
  border-radius: var(--corner);
  box-shadow: var(--shadow);
  margin: 0 auto;
  margin-bottom: 30px;
  max-width: 300px;
  overflow: auto;
  padding: 2% 4%;
  width: 60%;
}
.unpublished {
  color: var(--alert);
  display: inline-block;
  float: right;
  font-size: 60%;
}
.btn-lg {
  font-size: 2em;
  padding: 13px 18px;
}

.row {
  margin-bottom: 5px;
}

.navbar {
  border-radius: 0;
}

.navbar .dropdown-divider {
  border-top: 1px solid #545b63;
}

.navbar .dropdown-item {
  color: var(--white);
}

.navbar .dropdown-item:hover {
  background-color: #545b63;
}

.navbar .dropdown-menu {
  background-color: #464d54;
}


/* Used on About Page */
.col-sm-3 {
  color: var(--white);
  text-align: center;
  text-shadow: 2px 2px 8px var(--black);
}

.col-sm-9 img {
  width: 100%;
}

/* FontAwesome Overrides */
.fab {
  background-color: transparent;
  color: var(--white);
  font-size: 1.5em;
  margin: 0 .25em;
}

.fab:hover {
  color: var(--purple-lt);
}
.cards-index {
  text-align: center;
}

.cards-index p,
.cards-index h1,
.cards-index h2,
.cards-index h3,
.cards-index h4 {
  color: var(--white);
  text-shadow: var(--shadow);
}

.cards-index h1 {
  font-family: var(--chunky);
  font-size: 3.5em;
  line-height: 125%;
}

.card-tile {
  position: relative;
  text-align: center;
  z-index: 1;
}

.card-tile img {
  height: 150px;
}

.card-tile .position-number {
  position: absolute;
  top: 50px;
  bottom: 0;
  left: 0;
  right: 0;
  vertical-align: middle;
  font-family: Ultra, serif;
  font-size: 2rem;
  height: 0;
  margin-bottom: 0;
  z-index: 2;
}

.card-tile .card-holder {
  margin-bottom: .75em;
}

.card-tile .card-image {
  border-radius: var(--corner);
  box-shadow: var(--shadow);
  margin: 0 auto;
}

.card-tile .card-image:hover {
  box-shadow: var(--hover-shadow);
  cursor: pointer;
}

.rotated {
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.crossed {
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  z-index: 3;
}

.crossed .crossed-card-front {
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  z-index: 3;
}


@media only screen and (max-width: 768px) {
  .card-tile img {
    height: 75px;
  }

  .card-tile .position-number {
    font-size: 1rem;
    top: 25px;
  }
}

.card-front {
  border: 4px solid var(--beige);
}

.card-rear {
  border: 1px solid var(--card-bg);
}
.delete-checkbox {
  float: right;
  font-size: 50%;
}

.searchbar {
  margin: 0 auto;
  margin-bottom: 3rem;
}

.searchbar .searchbar-input {
  min-width: 100%;
}

.searchbar .fa-search {
  color: var(--gray-medium);
  float: right;
  position: relative;
  right: 14px;
  top: 25px;
}
/* This modal css uses the :target pseudo-class instead of javascript
   to show the modal when the link is clicked. The link must be an anchor
   link to the id of the modal. The modal is hidden by default
   and shown when the :target pseudo-class is active. */

.card-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--modal-backdrop);
  display: none;
  z-index: 100;
  overflow-y: scroll;
}

.card-modal:target {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-modal-content {
  padding: 20px;
  border-radius: 5px;
  background-color: var(--warm-beige);
  background-image: image-url(/assets/paper_modal-77fa4eb8ae0ecc1e3d370b368fdf6f1f38ce308e3058aac03306da6dfa7a4b47.png);
  background-size: 100%;
  width: 50%;
}

.card-modal-content .card-modal-body {
  overflow: auto;
  text-align: left;
}

.card-modal-content .card-modal-body p,
.card-modal-content .card-modal-body h2,
.card-modal-content .card-modal-body h3 {
  color: var(--black);
  font-family: var(--normal);
  text-shadow: none;
}

.card-modal-content .card-modal-body h3 {
  font-size: 20px;
}

.card-modal-content .card-modal-body p {
  margin-bottom: 0;
}

@media only screen and (max-width: 768px) {
  .card-modal-content {
    width: 90%;
  }
}

.card-modal-close {
  text-decoration: none;
  font-size: 24px;
  display: block;
  text-align: right;
}

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

.image-column .card-image {
  border-radius: var(--corner);
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}
/* About Page */
.headshot {
  border: 4px solid var(--purple-dk);
  border-radius: 50%;
  box-shadow: 2px 2px 8px var(--black);
  margin-bottom: 10px;
  max-width: 100%;
}

.ad {
  width: 60px;
}


/* Downloads Page */
.downloads-page {
  color: var(--white);
  font-family: var(--chunky);
  font-size: 2.5em;
  line-height: 125%;
  text-shadow: var(--shadow);
}

.logo-holder {
  margin: 0 auto;
  margin-bottom: 20px;
  max-width: 200px;
  min-height: 200px;
  text-align: center;
}


/* Store Page */
.paypal img {
  margin-bottom: 5px;
  width: 125px;
}

.widgets-tiny {
  display: inline-block;
}

.widgets-full {
  display: none;
}

@media only screen and (min-width: 768px) {
  .widgets-tiny {
    display: none;
  }

  .widgets-full {
    display: inline-block;
  }
}
/* Site-wide */
html,
body {
  height: 100%;
}

.layout,
.white-background-layout {
  min-height: 100vh;
  position: relative;
}

.layout .container,
.white-background-layout .container {
  padding-bottom: 90px;
}

body {
  background-attachment: fixed;
  background-position: top center;
  background-size: 100%;
  font-family: 'Quicksand', sans-serif;
}

.background-default {
  background-color: var(--brown);
  background-image: image-url(/assets/background_desktop_default-eb25cda6325ffa92683fa7f7c6811292c472c3daec6037cf18a26e7a4ea5bfd9.jpg);
}

.background-tapestry-blue {
  background-color: var(--blue-dk);
  background-image: image-url(/assets/background_desktop_tapestry_blue-c38e3f3334c9e15a5bcf9f38f9cb9e7eb3c65eccd61d90f7f255f6247ad06437.jpg);
}

.background-tapestry-gold {
  background-color: var(--gold);
  background-image: image-url(/assets/background_desktop_tapestry_gold-1dbf6c9f7982396eed834769ab34eeb4f91fe47a793c70ecfcdb4dbf2b2ee1d6.jpg);
}

.background-tapestry-purple {
  background-color: var(--blue-dk);
  background-image: image-url(/assets/background_desktop_purple-1d01d534597dabaed1a4c0a755661734e23c28fcdecee00776902e8878e618f2.jpg);
}

.background-gold {
  background-color: var(--gold);
  background-image: image-url(/assets/background_desktop_gold-587a33856a19c6cd97bdded2a19d93789355e7ac282670a0957733bc1062b834.jpg);
}

.background-fall {
  background-color: var(--beige);
  background-image: image-url(/assets/background_desktop_fall-7afc1919549210d6502e710dce0ff429e8fcbcd32439e655d269b57a39afe58f.jpg);
}

.background-december {
  background-color: var(--brown);
  background-image: image-url(/assets/background_desktop_december-e422b014db8057ac82bcc405eb1b436fc0cbe1129508ad3cdf635b8637808903.jpg);
}

.background-spring {
  background-color: var(--blue-lt);
  background-image: image-url(/assets/background_desktop_spring-0d3724ee88d28b338059f49fa22a9dda64cb1dda4a6864c83a5bbec5b84c6013.jpg);
}

.background-velvet {
  background-color: var(--teal);
  background-image: image-url(/assets/background_desktop_velvet-5c9c075aae99533ef328e88939e9b5081defd9b38b62983d57701b15d1778954.jpg);
}

a:focus {
  outline: 0;
}

.spacer {
  height: 50px;
}

.submit-spacer {
  margin: 20px 0;
}

.right {
  float: right;
}

.hidden {
  display: none;
}

footer {
  background-color: var(--transparent-black);
  bottom: 0;
  clear: both;
  color: var(--gray);
  height: 90px;
  overflow: auto;
  padding: 20px 45px;
  position: absolute;
  width: 100%;
}

footer span {
  display: inline-block;
  float: right;
}


/* Media Queries */
@media only screen and (max-width: 768px) {
  body {
    background-size: 1000px;
  }

  .background {
    background-image: image-url(/assets/background_mobile_default-f19ac27db15ea8f084e030772f759a5647be178749d9003fedc8ff527b3fb408.jpg);
  }

  .navbar-inverse .navbar-brand {
    font-size: 1em;
  }

  .spreads-index .sitename {
    font-size: 4em;
    line-height: 100%;
    margin-bottom: .25em;
  }

  .spreads-index .tagline {
    font-family: var(--script);
    font-size: 3.5em;
    line-height: 100%;
  }
}
/* These classes build out the grid required for the fancy card spread
   layouts. The grids assume half-steps so that we can achieve the overlap
   look. For example, this is the Bigger Picture Check-In spread. The
   numbers in this grid below represent each card position number. You
   can see each position number appears 4 times.

       55
    44 55 66
 33 44    66 77
 33 22    88 77
    22 11 88
       11

 While this is a 5-column and 5-row grid, it requires double that to
 be able to do the overlap. Otherwise, the layout would not have
 the overlap look and there would be gaps:

     5
   4   6
 3       7
   2   8
     1

 The grid breakdown for this spread layout is:
 Position 1: column 3, row 3
 Position 2: column 2, row 2.5
 Position 3: column 1, row 2
 Position 4: column 2, row 1.5
 Position 5: column 3, row 1
 Position 6: column 4, row 1.5
 Position 7: column 5, row 2
 Position 8: column 4, row 2.5
*/

.grid-container {
  display: grid;
  margin: 0 auto;
  grid-column-gap: .5rem;
  grid-row-gap: .2rem;
  justify-items: center;
  align-items: center;
  width: 600px;
}

@media only screen and (max-width: 768px) {
  .grid-container {
    width: 100%;
  }
}

/* Grid Size Styles */
.grid-container-1-col {
  grid-template-columns: repeat(1, 1fr);
}

.grid-container-2-col {
  grid-template-columns: repeat(4, 1fr);
}

.grid-container-3-col {
  grid-template-columns: repeat(6, 1fr);
}

.grid-container-4-col {
  grid-template-columns: repeat(8, 1fr);
}

.grid-container-5-col {
  grid-template-columns: repeat(10, 1fr);
}

.grid-container-1-row {
  grid-template-rows: repeat(1, 1fr);
}

.grid-container-2-row {
  grid-template-rows: repeat(4, 1fr);
}

.grid-container-3-row {
  grid-template-rows: repeat(6, 1fr);
}

.grid-container-4-row {
  grid-template-rows: repeat(8, 1fr);
}

.grid-container-5-row {
  grid-template-rows: repeat(10, 1fr);
}


/* Card Positioning Styles */
.grid-col-1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

.grid-col-1p5 {
  grid-column-start: 2;
  grid-column-end: 4;
}

.grid-col-2 {
  grid-column-start: 3;
  grid-column-end: 5;
}

.grid-col-2p5 {
  grid-column-start: 4;
  grid-column-end: 6;
}

.grid-col-3 {
  grid-column-start: 5;
  grid-column-end: 7;
}

.grid-col-3p5 {
  grid-column-start: 6;
  grid-column-end: 8;
}

.grid-col-4 {
  grid-column-start: 7;
  grid-column-end: 9;
}

.grid-col-4p5 {
  grid-column-start: 8;
  grid-column-end: 10;
}

.grid-col-5 {
  grid-column-start: 9;
  grid-column-end: 11;
}

.grid-row-1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

.grid-row-1p5 {
  grid-row-start: 2;
  grid-row-end: 4;
}

.grid-row-2 {
  grid-row-start: 3;
  grid-row-end: 5;
}

.grid-row-2p5 {
  grid-row-start: 4;
  grid-row-end: 6;
}

.grid-row-3 {
  grid-row-start: 5;
  grid-row-end: 7;
}

.grid-row-3p5 {
  grid-row-start: 6;
  grid-row-end: 8;
}

.grid-row-4 {
  grid-row-start: 7;
  grid-row-end: 9;
}

.grid-row-4p5 {
  grid-row-start: 8;
  grid-row-end: 10;
}

.grid-row-5 {
  grid-row-start: 9;
  grid-row-end: 11;
}
/* Home Page is spreads Index */
.spreads-index {
  color: var(--white);
  margin-bottom: 50px;
  text-align: center;
  text-shadow: var(--shadow);
}

.spreads-index a {
  color: var(--white);
}

.spreads-index a:hover {
  text-decoration: none;
}

.spreads-index .sitename {
  font-family: var(--chunky);
  font-size: 6em;
  margin-bottom: 3%;
}

.spreads-index .tagline {
  font-family: var(--script);
  font-size: 4em;
  margin-bottom: 70px;
  margin-top: 0;
}

.spreads-index .spread-tile {
  height: 300px;
}

.spreads-index .spread-tile a {
  text-decoration: none;
}

.spreads-index .spread-image-holder {
  background-image: radial-gradient(var(--gradient-lt) 0%, var(--gradient-dk) 60%);
  border-radius: 50%;
  box-shadow: var(--shadow);
  height: 150px;
  margin: 0 auto;
  position: relative;
  text-align: center;
  width: 150px;
}

.spreads-index .spread-image-holder img {
  left: 15px;
  max-height: 120px;
  max-width: 120px;
  position: absolute;
  top: 15px;
}


/* spread show page */
.spread {
  text-align: center;
}

.spread p,
.spread h1,
.spread h2,
.spread h3,
.spread h4 {
  color: var(--white);
  text-shadow: var(--shadow);
}

.spread h1 {
  font-family: var(--chunky);
  font-size: 3rem;
  line-height: 125%;
}

.spread h2 {
  margin-bottom: 20px;
  margin-top: 0;
}

@media only screen and (max-width: 768px) {
  .spread h1 {
    font-size: 2.25rem;
  }
}

.spread-image {
  width: 150px;
}

/* admin spread positions */
.position-form-wrapper {
  background: var(--gray-lt);
  border-radius: var(--corner);
  padding: 20px;
}

.position-form-wrapper .form-position {
  border-bottom: 1px solid var(--gray-medium);
  padding-bottom: 20px;
}

.position-form-wrapper .form-position:last-of-type {
  border-bottom: 0;
}
:root {
  /* Colors */
  --green-lt: #84b072;
  --green-dk: #50783f;
  --beige: #f5f5dc;
  --warm-beige: #ffede1;
  --black: #000;
  --blue-lt: #85b0cd;
  --blue-dk: #3b6b8c;
  --brown: #630;
  --purple-lt: #aa7fce;
  --purple-dk: #66348d;
  --gray-lt: #f1f1f1;
  --gray-medium: #e3e3e3;
  --gray: #808080;
  --gold: #fc3;
  --card-bg: #04343a;
  --bootstrap-gray: #343a40;
  --transparent-black: rgba(0, 0, 0, .75);
  --teal: #008080;
  --white: #fff;
  --alert: #f00;

  --gradient-lt: #aa7fce;
  --gradient-dk: #66348d;

  --modal-backdrop: rgba(0, 0, 0, .5);


  /* Dimensions */
  --corner: 7px;
  --shadow: 3px 3px 8px rgba(0, 0, 0, .75);
  --hover-shadow: 0 0 20px #ffede1;

  --circle-diameter: 150px;
  --circle-image: 120px;
  --circle-inset: 15px;

  --card-height: 150px;
  --card-width: 90px;

  --footer-height: 90px;

  --mobile: 768px;
  --desktop: 768px;


  /* Fonts */
  --chunky: Ultra, serif;
  --script: 'Dancing Script', cursive;
  --normal: 'Quicksand', sans-serif;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */