Template:Main Redesign/styles.css

.outer-box {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  overflow:hidden;
  font-size:.9em;
}

.card-images-1 {
  position: absolute;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 8px #303030);
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  z-index: 2;
  opacity:0;
  visibility:hidden;
  background-color:#d7d2c1;
  animation-duration: 1.3s;
  animation-fill-mode: forwards;
  animation-name: fadein4;
  animation-timing-function: ease-in-out;
}

.card-images-2 {
  position: absolute;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 8px #303030);
  overflow: hidden;
  opacity:0;
  visibility:hidden;
  background-color:#d7d2c1;
  transition: all 0.3s ease-in-out;
  z-index: 3;
  animation-duration: 1.6s;
  animation-iteration-count: 1;
  animation-name: fadein4;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.card-images-3 {
  position: absolute;
  border-radius: 5%;
  filter: drop-shadow(0px 0px 8px #303030);
  overflow: hidden;
  z-index: 1;
  opacity:0;
  visibility:hidden;
  background-color:#d7d2c1;
  transition: all 0.3s ease-in-out;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: fadein4;
  animation-timing-function: ease-in-out;
}

.card-images-1 img,
.card-images-2 img,
.card-images-3 img {
  width: 240px;
  height: auto;
  border-radius: 5%;
  border: 5px solid #d7d2c1;
}

.rulebook {
  position: absolute;
  background-color: #6a624d;
  border-radius: 5%;
  background: linear-gradient(120deg, #c5bda4, #e4e2c8);
  filter: drop-shadow(0px 0px 8px #303030);
  padding: 5px;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-name: fadein1;
  animation-timing-function: ease-in-out;
  z-index: 6;
}

.rulebook img {
  width: 300px;
  height: auto;
  z-index: 10;
  border-radius: 5%;
}

.op-image {
  position:absolute;
  background-color:#c0c0c0;
  border:5px solid #e0e0e0;
  filter:drop-shadow(0px 0px 8px #808080);
  border-radius: 10px;
  overflow:hidden;
  transition:all .3s ease-in-out;
  z-index:13;
  opacity:0;
  visibility:hidden;
  transition: all 0.3s ease-in-out;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-name: fadein4;
  animation-timing-function: ease-in-out;
}

.op-image img {
  width:500px;
  height:auto;
  z-index:10;
  border-radius:10px;
}


.card-images-1 a,
.card-images-2 a,
.card-images-3 a,
.rulebook a,
.op-image a {
  opacity: 0;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  padding-top: 50%;
  padding-left: 10%;
  padding-right: 10%;
  box-sizing: border-box;
  background-color: #161510;
  color: white;
  text-decoration: none;
  font-size: 1.3em;
  transition: all 0.3s ease-in-out;
  font-family: zilla slab;
}

.op-image a {
 padding-top:20%;
}

.card-images-1:hover a,
.card-images-2:hover a,
.card-images-3:hover a,
.rulebook:hover a,
.op-image:hover a {
  display: block;
  opacity: 0.8;
}

.card-images-1:hover,
.card-images-2:hover,
.card-images-3:hover,
.rulebook:hover,
.op-image:hover {
  transform: translate(0px, -5px);
}

.registered-decks {
  display:grid;
  grid-template-columns:auto;
  grid-row-gap:0px;
  border:5px solid #b0b0b0;
  font-family:lato,zilla slab;
  box-sizing:border-box;
  font-size:1.2em;
  text-align:center;
  width:310px;
  border-radius:10px;
  padding:10px;
  background-color:#e0e0e0;
  position:absolute;
  z-index:21;
  filter:drop-shadow(0px 0px 8px #808080);
}

.registered-decks span {
  background-color:#ffffff;
  padding:5px 0px 5px 0px;
}

.registered-decks span:nth-of-type(even) {
  border-bottom:1px solid #c0c0c0;
  background-color:#ffffff;
  font-family:zilla slab;
}

.registered-decks span:last-of-type {
	padding-bottom:10px !important;
	border-bottom-left-radius:8px;
    border-bottom-right-radius:8px;
}

.registered-decks img {
  height:30px;
  width:auto;
}

.registered-decks .deck-registration-title {
  font-size:1em;
  font-family:castoro;
  color:#303030;
  background-color:#ffffff;
  padding-top:10px !important;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
}

.registered-decks .deck-registration-title:first-line {
  font-size:1.3em;
  color:#414995;
  font-family:castoro;
}

.archon-image {
  height:200px;
  width:auto;
  position:absolute;
  top:0px;
  left:30px;
  z-index:-1;
  opacity:0;
  animation-duration: .4s;
  animation-fill-mode: forwards;
  animation-name: fadein3;
  animation-timing-function: ease-in-out;
  border-radius:50%;
}

.title-text {
  font-size: 5.2em;
  color: #101010;
  font-family: castoro;
  padding:18px 3px 0px 205px;
  margin-bottom: -25px;
  position: relative;
  z-index: 2;
  opacity:0;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: fadein1;
  animation-timing-function: ease-in-out;
}

.subtitle {
  margin-top: -10px;
  font-family: castoro;
  font-size: 1.4em;
  padding:8px 0px 12px 185px;
  background-color: transparent;
  color: #000000;
  width: 100%;
  opacity:0;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-name: fadein1;
  animation-timing-function: ease-in-out;
}

/* first section : cards */
.card-title {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 2.3em;
  font-family: castoro,zilla slab;
  padding: 5px 0px 0px 40px;
    border-top: 5px solid #b0b0b0;
  z-index: 5;
  color: white;
  background-color: #195e83;
  background-image: linear-gradient(200deg, #195e83, #103d56);
}

.card-title img {
  width: 80px;
  height: auto;
  margin-top: -12px;
  margin-bottom: -5px;
}

.welcome-message img {
  height: 60px;
  width: auto;
  margin-top: -5px;
  margin-bottom: -5px;
}

.welcome-message {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 0px;
  font-size: 1.2em;
  font-family: castoro,zilla slab;
  padding: 0px 0px 50px 40px;
  background-color: #b3d4e6;
  clip-path: polygon(
    100% 0%,
    0% 0%,
    0% 54%,
    1% 53.95%,
    2% 53.9%,
    3% 53.7%,
    4% 53.5%,
    5% 53.25%,
    6% 52.95%,
    7% 52.55%,
    8% 52.15%,
    9% 51.7%,
    10% 51.25%,
    11% 50.8%,
    12% 50.3%,
    13% 49.8%,
    14% 49.3%,
    15% 48.8%,
    16% 48.35%,
    17% 47.9%,
    18% 47.5%,
    19% 47.1%,
    20% 46.8%,
    21% 46.5%,
    22% 46.3%,
    23% 46.15%,
    24% 46.05%,
    25% 46%,
    26% 46%,
    27% 46.1%,
    28% 46.25%,
    29% 46.45%,
    30% 46.7%,
    31% 47.05%,
    32% 47.4%,
    33% 47.8%,
    34% 48.2%,
    35% 48.7%,
    36% 49.15%,
    37% 49.65%,
    38% 50.15%,
    39% 50.65%,
    40% 51.15%,
    41% 51.6%,
    42% 52.05%,
    43% 52.45%,
    44% 52.85%,
    45% 53.15%,
    46% 53.45%,
    47% 53.65%,
    48% 53.85%,
    49% 53.95%,
    50% 54%,
    51% 54%,
    52% 53.9%,
    53% 53.75%,
    54% 53.55%,
    55% 53.3%,
    56% 53%,
    57% 52.65%,
    58% 52.25%,
    59% 51.85%,
    60% 51.4%,
    61% 50.9%,
    62% 50.4%,
    63% 49.9%,
    64% 49.4%,
    65% 48.95%,
    66% 48.45%,
    67% 48%,
    68% 47.6%,
    69% 47.2%,
    70% 46.9%,
    71% 46.6%,
    72% 46.35%,
    73% 46.2%,
    74% 46.05%,
    75% 46%,
    76% 46%,
    77% 46.1%,
    78% 46.2%,
    79% 46.4%,
    80% 46.65%,
    81% 46.95%,
    82% 47.3%,
    83% 47.65%,
    84% 48.1%,
    85% 48.55%,
    86% 49.05%,
    87% 49.5%,
    88% 50%,
    89% 50.5%,
    90% 51%,
    91% 51.5%,
    92% 51.95%,
    93% 52.35%,
    94% 52.75%,
    95% 53.1%,
    96% 53.4%,
    97% 53.6%,
    98% 53.8%,
    99% 53.95%,
    100% 54%
  );
}

/* body of cards section / first section */

.menu-1 {
  background-color: #ffffff;
  font-family: zilla slab;
  padding: 30px 0px 30px 40px;
  margin-top: -60px;
  display: flex;
  flex-wrap: wrap;
}

.menu-1 li,
.menu-2 li,
.menu-3 li,
.menu-4 li,
.menu-5 li {
  list-style-type: none;
  list-style: none inside none;
  margin-left: 0px;
  flex: 1;
  padding-left: 0px;
  padding-right: 2px;
  width: 100%;
  background-color: transparent;
}

.menu-5 li {
  padding-top: 2px;
  padding-bottom: 2px;
}

.menu-1 ul,
.menu-2 ul,
.menu-3 ul,
.menu-4 ul,
.menu-5 ul {
  list-style-type: none;
  list-style: none inside none;
  margin: 0px;
  padding: 0px;
}

.menu-title {
  font-size: 1.5em;
  font-weight: 500;
  display: flex;
  align-items: center;
  font-family: castoro,zilla slab;
  color: #414995;
  padding-bottom: 5px;
}

.card-menu-1 {
  font-size: 1.2em;
  border-right: 1px solid #a0a0a0;
  padding-right: 50px;
}

.card-menu-1 li:first-of-type {
  margin-bottom: 8px;
  font-size: 1.2em;
  background-color: #d6eaf5;
  border-radius: 5px;
  padding: 5px 10px 0px 10px !important;
  font-family:castoro !important;
  filter:drop-shadow(1px 1px 0px #303030);
  height:35px;
}

.card-menu-2 {
  font-size: 1.2em;
  padding-left: 50px;
}

/* rules section */

.rules-title img {
  height: 60px;
  width: auto;
  margin-top:-5px;
  margin-right: 5px;
}

.rules-title {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 2.3em;
  font-family: castoro,zilla slab;
  padding: 11px 0px 6px 400px;
  border-top: 5px solid #a0a0a0;
  z-index: 4;
  position: relative;
  color: white;
  background-color: #505050;
  background-image: linear-gradient(200deg, #505050, #303030);
}

.menu-2 {
  display: flex;
  flex-wrap: wrap;
  font-family: zilla slab;
  padding: 20px 10px 20px 370px;
  z-index: 5;
  position: relative;
  background-color: #ffffff;
}

.rules-menu-1,
.rules-menu-2,
.rules-menu-3 {
  font-size: 1.2em;
  padding-right: 30px;
  padding-left: 30px;
  padding-bottom: 20px;
}

.rules-menu-1,
.rules-menu-2 {
  border-right: 1px solid #d0d0d0;
}

form.deckSearch input[type="text"] {
  padding: 10px;
  font-size: 1.2em;
  border: 0px solid white;
  float: left;
  width: 600px;
  color: black;
  height: 2.2em;
  background: #e0e0e0;
  box-sizing: border-box;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  margin-top: 0px !important;
  font-family: zilla slab;
}

form.deckSearch button {
  float: left;
  padding: 8px 5px 8px 5px;
  background: #e0e0e0;
  color: white;
  height: 2.2em;
  box-sizing: border-box;
  font-size: 1.2em;
  border: 0px solid white;
  cursor: pointer;
  font-family: zilla slab;
  font-style: normal;
  margin-left: 0px;
  margin-top: 0px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

form.deckSearch button:hover {
  background: #a0a0a0;
}

form.deckSearch button:hover img {
  filter: invert(1);
}

form.deckSearch::after {
  content: "";
  clear: both;
  display: table;
}

form.deckSearch button img {
  height: 30px;
  width: auto;
  margin-top: -5px;
}

form.deckSearch input[type="text"]:focus {
  border: 0px;
  outline: 0px;
  background-color: #d0d0d0;
}

form.deckSearch input[type="text"]:active {
  border: 0px;
  outline: 0px;
  background-color: #d0d0d0;
}

.deck-search {
  width: 100%;
  color: #000000;
  font-family: zilla slab;
  padding-left: 25px;
  font-size: 1.2em;
}

.deck-search-text {
  display: flex;
  align-items: center;
}
.deck-search-text img {
  height: 50px;
  width: auto;
}

/* third section: organized play */

.op-title img {
  width: 60px;
  height: auto;
  margin-top:-5px;
}

.op-title {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 2.3em;
  font-family: castoro,zilla slab;
  padding: 11px 0px 6px 40px;
  border-top: 5px solid #a0a0a0;
  z-index: 7;
  position: relative;
  color: white;
  background-color: #24247b;
  background-image: linear-gradient(200deg, #28288a, #222277);
}

.menu-3 {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 10px 30px 10px;
  background-color: #ffffff;
  z-index: 7;
  font-family: zilla slab;
  position: relative;
}

.op-menu-1,
.op-menu-2 {
  font-size: 1.2em;
  padding-right: 30px;
  padding-left: 30px;
}

.op-menu-1 {
  border-right: 1px solid #c0c0c0;
}

/* fourth section: explore */

.explore-title img {
  width: 60px;
  height: auto;
  margin-top:-5px;
}

.explore-title {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 2.3em;
  font-family: castoro,zilla slab;
  padding: 11px 0px 6px 400px;
  border-top: 5px solid #a0a0a0;
  z-index: 20;
  position: relative;
  color: white;
  background-color: #198585;
  background-image: linear-gradient(200deg, #198585, #105656);
}

.menu-4 {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 10px 20px 370px;
  position: relative;
  font-family: zilla slab;
}

.explore-menu-1,
.explore-menu-2,
.explore-menu-3 {
  padding: 0px 30px 0px 30px;
  font-size: 1.2em;
}

.explore-menu-1,
.explore-menu-2 {
  border-right: 1px solid #d0d0d0;
}

/* fifth section: news & upcoming events */

.news-title img {
  width: 60px;
  height: auto;
  margin-top:-5px;
}

.news-title {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 2.3em;
  font-family: castoro,zilla slab;
  padding: 11px 0px 6px 40px;
  border-top: 5px solid #a0a0a0;
  z-index: 7;
  color: white;
  background-color: #195e83;
  background-image: linear-gradient(200deg, #195e83, #103d56);
}

.menu-5 {
  display: flex;
  flex-wrap: wrap;
}

.news {
  flex: 1;
  max-width: 800px;
}

.upcoming-events {
  flex: 1;
}

.menu-5-title {
  background-color: #e0e0e0;
  padding: 10px 10px 5px 40px;
  font-family: castoro,zilla slab;
  font-size: 2em;
  color: #2b368d;
}

.menu-5-content {
  padding: 20px 10px 30px 40px;
  line-height: 1.5em;
  font-size: 1.1em;
}

.menu-5-content h3 {
  padding: 10px 0px 0px 0px;
  margin: 10px 0px 5px 0px;
  width: 100%;
  color: #414995;
  border-bottom: 1px solid #d0d0d0;
  font-weight: 500;
  font-size: 1.5em;
  line-height: 1.7em;
  font-family: castoro,zilla slab;
}

.menu-5-content h3:first-of-type {
  padding-top: 0px;
  margin-top: 0px;
}

.news-arrow {
  width: 30px;
  height: auto;
  margin-top: -3px;
}

/* sixth section: disclaimer */

.disclaimer-title img {
  width: 60px;
  height: auto;
  margin-left: 0px;
  margin-top:-5px;
}

.disclaimer-title {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 2em;
  font-family: castoro,zilla slab;
  padding: 11px 0px 6px 40px;
  border-top: 5px solid #a0a0a0;
  z-index: 5;
  color: white;
  background-color: #505050;
  background-image: linear-gradient(200deg, #505050, #303030);
}


.contribute-text {
  font-family:castoro;
  width:100%;
  font-size:1.1em;
  text-align:left;
  background-color:#b3d4e6;
  padding:15px 10px 12px 40px;
  line-height:1.5em;
}

.contribute-text img {
  height:30px;
  width:30px;
  margin-top:-4px;
}

.contribute-text a:link,
.contribute-text a:visited {
  font-weight: 600;
  color: #2b368d;
  text-decoration: none;
  margin-left: 3px;
  border-bottom: 0px solid transparent;
  display: inline-block;
  font-family: castoro,zilla slab;
  background-color: #edf4f7;
    filter:drop-shadow(1px 1px 0px #303030);
  /*background-image: linear-gradient(#ffffff, #d0d0d0); */
  padding: 2px 5px 0px 5px;
  border-radius: 5px;
}
.contribute-text a:hover {
  text-decoration: none;
  border-bottom: 0px solid transparent;
}

.contribute-text .hidden-bg {
  position: absolute;
  height: 100%;
  width: 0%;
 background-color:#eaeaea;
  border-radius: 5px;
  top: 0%;
  left: 0px;
  z-index: -1;
  overflow: hidden;
  border-bottom: 2px solid #1c2b9c;
  transition: all 0.2s ease-in-out;
}

.contribute-text a:hover .hidden-bg {
	width:100%;
}


.disclaimer-text {
  padding: 20px 15px 25px 40px;
  font-size: 1.1em;
  line-height: 1.5em;
  background-color: #ffffff;
}

.disclaimer-text:first-letter {
  color: #ffffff;
  float: left;
  font-family: zilla slab, mate sc;
  font-size: 80px;
  line-height: 80px;
  margin-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
  margin-right: 10px;
  background-color: #909090;
  border-radius: 10px;
}

.contact-row {
  display: flex;
  justify-content: center;
  background-color: #d0d0d0;
  padding: 10px 0px 10px 0px;
  font-family: castoro;
  font-size: 1.2em;
}

.contact-link {
  display: flex;
  align-items: center;
  margin-left: 25px;
  margin-right: 25px;
  padding: 7px 20px 5px 15px;
  border-radius: 10px;
  text-decoration: none;
  color: #000000;
  transition: all 0.3s ease-in-out;
}

.contact-row a:link {
  text-decoration: none;
  color: #000000;
  display: flex;
  align-items: center;
}

.contact-row a:visited {
  text-decoration: none;
  color: #000000;
}

.contact-link:hover {
  background-color: #b0b0b0;
}

.contact-link img {
  margin-top: -10px;
  margin-bottom: -8px;
  margin-right: 5px;
  transition: all 0.2s ease-in-out;
}

.contact-link:nth-of-type(1) img {
  width: 35px;
  height: auto;
}

.contact-link:nth-of-type(2) img {
  width: 30px;
  height: auto;
}

.contact-link:nth-of-type(3) img {
  width: 25px;
  height: auto;
}

.contact-link:hover img {
  transform: scale(1.1);
}

/* link formatting */
.disclaimer-text a:link,
.menu-5-content a:link,
.essay-slide a:link {
  text-decoration: none;
  color: #808080;
  border-bottom: 1px solid #c0c0c0;
}

.disclaimer-text a:visited,
.menu-5-content a:visited,
.essay-slide a:visited {
  text-decoration: none;
  border-bottom: 1px solid #c0c0c0;
  color: #505050;
}

.disclaimer-text a:hover,
.menu-5-content a:hover,
.essay-slide a:hover {
  color: #1c2b9c;
  text-decoration: none;
  border-bottom: 2px solid #1c2b9c;
}

.news-archive a:link,
.news-archive a:visited {
  border-bottom: 2px solid transparent;
  font-weight: 500;
}

.news-archive a:hover {
  border-bottom: 2px solid #1c2b9c;
}

.menu-1 a:link,
.menu-1 a:visited,
.menu-2 a:link,
.menu-2 a:visited,
.menu-3 a:link,
.menu-3 a:visited,
.menu-4 a:link,
.menu-4 a:visited {
  text-decoration: none;
  color: #000000;
  border-bottom: 2px solid transparent;
}

.menu-1 a,
.welcome-message a,
.menu-2 a,
.menu-3 a,
.menu-4 a {
  position: relative;
  z-index: 10;
  padding-bottom: 2px;
}

.welcome-message a:link,
.welcome-message a:visited {
  font-weight: 600;
  color: #2b368d;
  text-decoration: none;
  margin-left: 5px;
  border-bottom: 0px solid transparent;
  display: inline-block;
  font-family: castoro,zilla slab;
  background-color: #edf4f7;
    filter:drop-shadow(1px 1px 0px #303030);
  /*background-image: linear-gradient(#ffffff, #d0d0d0); */
  padding: 2px 8px 0px 8px;
  border-radius: 5px;
}

.menu-1 a:hover,
.menu-2 a:hover,
.menu-3 a:hover,
.menu-4 a:hover {
  color: #1c2b9c;
  text-decoration: none;
}

.welcome-message a:hover {
  text-decoration: none;
  border-bottom: 0px solid transparent;
}

.menu-1 .hidden-bg,
.menu-2 .hidden-bg,
.menu-3 .hidden-bg,
.menu-4 .hidden-bg {
  position: absolute;
  height: 50%;
  width: 0%;
  background-color: transparent;
  top: 50%;
  left: 0px;
  z-index: -1;
  overflow: hidden;
  border-bottom: 2px solid #1c2b9c;
  transition: all 0.2s ease-in-out;
}

.menu-1 li:hover .hidden-bg,
.menu-2 li:hover .hidden-bg,
.menu-3 li:hover .hidden-bg,
.menu-4 li:hover .hidden-bg, 
.card-menu-1 li:first-of-type:hover .hidden-bg {
  width: 100%;
}

.welcome-message .hidden-bg {
  position: absolute;
  height: 100%;
  width: 0%;
 background-color:#eaeaea;
  border-radius: 5px;
  top: 0%;
  left: 0px;
  z-index: -1;
  overflow: hidden;
  border-bottom: 2px solid #1c2b9c;
  transition: all 0.2s ease-in-out;
}

.welcome-message a:hover .hidden-bg {
	width:100%;
}

.card-menu-1 li:first-of-type .hidden-bg {
  top: 0px;
  left: 0px;
  height: 100%;
  width: 0%;
  border-radius: 5px;
  background-color: #e0e0e0; /*d6eaf5 */
}

.card-menu-1 li:first-of-type:hover .hidden-bg {
   border-bottom: 2px solid #1c2b9c;
}
 	
.explore-menu-1 li:first-of-type a {
  font-weight: 600;
  color: #2b368d;
}

.explore-menu-1 li:first-of-type:before {
  content: "✦";
  margin-right: 5px;
}

.essay-title {
  background-color: #e0e0e0;
  padding: 15px 5px 10px 400px;
  margin-top: 10px;
  font-family: castoro,zilla slab;
  font-size: 1.4em;
  display: flex;
  align-items: center;
}

.essay-title img {
  height: 50px;
  width: auto;
  margin-right: 5px;
  margin-top: -15px;
  margin-bottom: -10px;
}

/* outer container for the slideshow */
.essay-slideshow {
  position: relative;
  background: #ffffff;
  max-width: 700px;
  margin-bottom: 20px;
  margin-left: 400px;
  min-height: 50px;
}

/* essay slideshow */
.essay-slide {
  display: none;
  padding: 9px 50px 7px 50px;
  text-align: left;
  font-family: zilla slab;
  font-size: 1.2em;
}

.essay-slide:first-of-type {
  display: block;
}

/* forward and back buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  font-family: calistoga, arbutus, zilla slab;
  top: 0px;
  width: auto;
  padding: 5px;
  color: #888;
  font-weight: bold;
  font-size: 1.5em;
  border-radius: 5px;
  user-select: none;
}

.next {
  position: absolute;
  right: 20px;
}

.prev:hover,
.next:hover {
  background-color: #a0a0a0;
  color: white;
}

@media screen and (min-width: 1261px) {
  .card-images-1 {
    top: 175px;
    left: 735px;
    left: calc(60%);
  }

  .card-images-2 {
    top: 200px;
    left: 510px;
    left: calc(60% - 230px);
  }

  .card-images-3 {
    top: 200px;
    left: 960px;
    left: calc(60% + 230px);
  }

  .rulebook {
    top: 485px;
    left: 30px;
  }

  .rulebook img {
    width: 300px;
    height: auto;
  }

  .op-image {
  top:960px;
  left:56%;
  }
  
  .registered-decks {
  	top:1210px;
  	left:30px;
  }
}

@media screen and (max-width: 1260px) {
  .card-images-1 {
    top: 185px;
    left: 700px;
    left: calc(63% + 105px);
  }

  .card-images-2 {
    top: 210px;
    left: 510px;
    left: calc(63% - 105px);
    /* right: 220px;*/
  }

  .card-images-3 {
    display: none;
  }
  .card-images-1 img,
  .card-images-2 img,
  .card-images-3 img {
    width: 230px;
    height: auto;
  }

  .card-images-1 a,
  .card-images-2 a,
  .card-images-3 a,
  .rulebook a,
  .op-image a {
    font-size: 1.1em;
  }

  .rulebook {
    top: 485px;
    left: -40px;
  }

  .rulebook img {
    width: 250px;
    height: auto;
  }

  .op-image {
    top:950px;
    left:calc(350px + 20%);
  }
  
  .registered-decks {
  	display:none;
  }
  
  .welcome-message {
    padding: 0px 0px 50px 20px;
  }

  .card-title {
    padding: 5px 0px 2px 20px;
  }

  .menu-1 {
    padding: 30px 0px 20px 20px;
  }

  .rules-title {
    padding: 11px 0px 6px 240px;
  }

  .menu-2 {
    padding: 15px 10px 20px 220px;
  }

  form.deckSearch input[type="text"] {
    width: calc(100% - 50px);
  }

  .op-title {
    padding: 11px 0px 6px 20px;
  }

  .menu-3 {
    padding: 15px 10px 30px 0px;
  }

  .op-menu-1,
  .op-menu-2 {
    padding-right: 20px;
    padding-left: 20px;
  }

  .explore-title {
    padding: 11px 0px 6px 20px;
  }

  .menu-4 {
    padding: 15px 10px 20px 0px;
    position: relative;
  }

  .explore-menu-1,
  .explore-menu-2,
  .explore-menu-3 {
    padding: 0px 20px 0px 20px;
  }

  .essay-title {
    padding: 15px 5px 10px 20px;
  }

  .essay-slideshow {
    margin-left: 20px;
  }

  .news-title {
    padding: 11px 0px 6px 20px;
  }

  .menu-5-title {
    padding: 10px 10px 5px 20px;
  }

  .menu-5-content {
    padding: 10px 10px 30px 20px;
  }

  .disclaimer-title {
    padding: 11px 0px 6px 20px;
  }

   .contribute-text {
  padding:10px 10px 10px 20px;
  }

  .disclaimer-text {
    padding: 10px 10px 20px 20px;
  }
}

@media screen and (max-width: 1000px) {
  .card-images-1 {
    display: none;
  }

  .card-images-2 {
    display: none;
  }

  .rulebook {
    display: none;
  }

  .op-image {
    display: none;
  }
  
  .registered-decks {
  	display:none;
  }

  .card-title {
    font-size: 2em;
    padding: 5px 0px 2px 10px;
  }

  .card-title img {
    width: 70px;
    height: auto;
    margin-top: -5px;
    margin-bottom: -5px;
  }

  .welcome-message img {
    height: 50px;
    width: auto;
    margin-right: 2px;
  }

  .welcome-message {
    margin-bottom: 0px;
    font-size: 1.2em;
    padding: 5px 0px 55px 20px;
    clip-path: polygon(
      100% 0%,
      0% 0%,
      0% 52.5%,
      1% 52.5%,
      2% 52.45%,
      3% 52.4%,
      4% 52.35%,
      5% 52.3%,
      6% 52.2%,
      7% 52.1%,
      8% 51.95%,
      9% 51.85%,
      10% 51.7%,
      11% 51.5%,
      12% 51.35%,
      13% 51.15%,
      14% 51%,
      15% 50.8%,
      16% 50.6%,
      17% 50.4%,
      18% 50.2%,
      19% 49.95%,
      20% 49.75%,
      21% 49.55%,
      22% 49.35%,
      23% 49.15%,
      24% 48.95%,
      25% 48.75%,
      26% 48.6%,
      27% 48.45%,
      28% 48.25%,
      29% 48.15%,
      30% 48%,
      31% 47.9%,
      32% 47.8%,
      33% 47.7%,
      34% 47.6%,
      35% 47.55%,
      36% 47.55%,
      37% 47.5%,
      38% 47.5%,
      39% 47.5%,
      40% 47.55%,
      41% 47.6%,
      42% 47.65%,
      43% 47.75%,
      44% 47.85%,
      45% 47.95%,
      46% 48.05%,
      47% 48.2%,
      48% 48.35%,
      49% 48.55%,
      50% 48.7%,
      51% 48.9%,
      52% 49.05%,
      53% 49.25%,
      54% 49.45%,
      55% 49.7%,
      56% 49.9%,
      57% 50.1%,
      58% 50.3%,
      59% 50.5%,
      60% 50.7%,
      61% 50.9%,
      62% 51.1%,
      63% 51.3%,
      64% 51.45%,
      65% 51.6%,
      66% 51.75%,
      67% 51.9%,
      68% 52.05%,
      69% 52.15%,
      70% 52.25%,
      71% 52.35%,
      72% 52.4%,
      73% 52.45%,
      74% 52.5%,
      75% 52.5%,
      76% 52.5%,
      77% 52.5%,
      78% 52.45%,
      79% 52.4%,
      80% 52.3%,
      81% 52.25%,
      82% 52.15%,
      83% 52%,
      84% 51.9%,
      85% 51.75%,
      86% 51.6%,
      87% 51.4%,
      88% 51.25%,
      89% 51.05%,
      90% 50.85%,
      91% 50.65%,
      92% 50.45%,
      93% 50.25%,
      94% 50.05%,
      95% 49.85%,
      96% 49.65%,
      97% 49.45%,
      98% 49.25%,
      99% 49.05%,
      100% 48.85%
    );
  }

  .menu-1 {
    padding: 30px 0px 20px 20px;
    display: flex;
  }

  .menu-title {
    font-size: 1.2em;
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #d0d0d0;
  }

  .card-menu-1 {
    font-size: 1.2em;
    border-right: 0px solid #a0a0a0;
    padding-right: 50px;
  }

  .card-menu-2 {
    font-size: 1.2em;
    padding-left: 0px;
  }

  .rules-title img {
    height: 50px;
    width: auto;
    margin-right: 5px;
  }

  .rules-title {
    font-size: 2em;
    padding: 11px 0px 6px 10px;
  }

  .menu-2 {
    display: flex;
    flex-wrap: wrap;
    padding: 15px 10px 20px 20px;
  }

  .rules-menu-1,
  .rules-menu-2,
  .rules-menu-3 {
    font-size: 1.2em;
    padding-right: 50px;
    padding-left: 0px;
    padding-bottom: 15px;
  }

  .rules-menu-1,
  .rules-menu-2 {
    border-right: 0px solid #d0d0d0;
  }

  form.deckSearch input[type="text"] {
    font-size: 1em;
  }

  form.deckSearch button {
    font-size: 1em;
    padding: 5px 5px 5px 5px;
  }

  form.deckSearch button img {
    height: 30px;
    width: 30px;
    margin-top: -2px;
  }

  .deck-search {
    padding-left: 0px;
  }

  .deck-search img {
    height: 40px;
    width: auto;
  }

  .op-title img {
    width: 50px;
    height: auto;
  }

  .op-title {
    font-size: 2em;
    padding: 11px 0px 6px 10px;
  }

  .menu-3 {
    display: flex;
    padding: 15px 10px 5px 20px;
  }

  .op-menu-1,
  .op-menu-2 {
    font-size: 1.2em;
    padding-right: 50px;
    padding-left: 0px;
    padding-bottom: 15px;
  }

  .op-menu-1 {
    border-right: 0px solid #c0c0c0;
  }

  .explore-title img {
    width: 50px;
    height: auto;
  }

  .explore-title {
    font-size: 2em;
    padding: 11px 0px 6px 10px;
  }

  .menu-4 {
    display: flex;
    padding: 15px 10px 5px 20px;
  }

  .explore-menu-1,
  .explore-menu-2,
  .explore-menu-3 {
    padding: 0px 50px 15px 0px;
  }

  .explore-menu-1,
  .explore-menu-2 {
    border-right: 0px solid #d0d0d0;
  }

  .news-title img {
    width: 50px;
    height: auto;
  }

  .news-title {
    font-size: 2em;
    padding: 11px 0px 6px 15px;
  }

  .menu-5 {
    display: block;
  }

  .news {
    max-width: 100%;
  }

  .menu-5-title {
    padding: 10px 10px 5px 20px;
    font-size: 1.7em;
  }

  .menu-5-content {
    padding: 10px 10px 20px 20px;
  }

  .menu-5-content h3 {
    font-size: 1.3em;
  }

  .news-archive {
    margin-bottom: -10px;
  }

  .disclaimer-title img {
    width: 50px;
    height: auto;
  }

  .disclaimer-title {
    font-size: 2em;
    padding: 11px 0px 6px 18px;
  }

      .contribute-text {
  padding:10px 10px 10px 20px;
  }

  .disclaimer-text {
    padding: 10px 10px 20px 20px;
  }

  .contact-link {
    margin-left: 10px;
    margin-right: 10px;
    padding: 7px 20px 5px 15px;
    border-radius: 10px;
  }
}

@media screen and (max-width: 800px) {
  .archon-image {
  height:225px;
  width:auto;
  position:absolute;
  top:0px;
  left:0px;
  border:0px;
  left:calc(50% - 280px);
  z-index:-1;
  opacity:0;
    animation-duration: .5s;
  animation-fill-mode: forwards;
  animation-name: fadein2;
  animation-timing-function: ease-in-out;
}

  .title-text {
    font-size: 5.3em;
    padding: 40px 165px 35px 165px;
    line-height:.8em;
    text-align: center;
    animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: fadein1;
  animation-timing-function: ease-in-out;
  }

  .subtitle {
    font-size: 1.4em;
    padding: 12px 0px 8px 0px;
    text-align: center;
    background-color: #070952;
    border-top: 5px solid #b0b0b0;
    color: white;
    opacity:1;
    visibility:visible;
    animation:none;
  }
  
  .card-title {
  	border-top:2px solid #b0b0b0;
  }
  

    .desktop-display {
    display: none;
  }

	
}

@media screen and (max-width: 600px) {

  .archon-image {
     left:calc(50% - 220px);
   }

    .title-text {
    font-size: 5.3em;
    padding: 40px 65px 35px 65px;
    line-height:.8em;
  }


  .welcome-message img {
    height: 50px;
    width: auto;
    margin-top: -20px;
    margin-bottom: -15px;
    margin-left: -5px;
  }

  .welcome-message {
    margin-bottom: 0px;
    font-size: 1.2em;
    padding: 12px 10px 100px 20px;
  }

  .welcome-message {
    width: 100%;
    display: block;
    align-items: center;
    margin-bottom: 0px;
  }

  .menu-1 {
    margin-top: -90px;
    padding-top: 35px;
  }

  form.deckSearch input[type="text"] {
    font-size: 1.1em;
    width: 200px;
    width: calc(100% - 50px);
    margin-top: 5px;
  }

  form.deckSearch button {
    font-size: 1.1em;
  }

  .deck-search {
    padding-left: 0px;
    font-size: 1em;
  }

  .news-title {
    font-size: 2em;
    padding: 11px 0px 6px 10px;
  }

  .disclaimer-title {
    font-size: 2em;
    padding: 11px 0px 6px 10px;
  }

  .disclaimer-text:first-letter {
    font-size: 60px;
    line-height: 60px;
    margin-top: 5px;
  }

  .contact-row {
    display: flex;
    align-items: center;
    margin-left: -5px;
  }

  .contact-link {
    margin-left: 0px;
    margin-right: 0px;
    padding: 7px 7px 5px 3px;
    border-radius: 5px;
    font-size: 0.9em;
  }

  .mobile-block {
    display: block;
    padding-top: 4px;
  }

  .menu-2,
  .menu-3,
  .menu-4 {
    display: block;
  }

  .rules-menu-1,
  .rules-menu-2,
  .rules-menu-3,
  .op-menu-1,
  .op-menu-2,
  .explore-menu-1,
  .explore-menu-2,
  .explore-menu-3 {
    padding-right: 0px;
  }

  .welcome-message,
  .menu-1,
  .menu-2,
  .menu-3,
  .menu-4,
  .menu-5-title,
  .menu-5-content,
  .disclaimer-text, .contribute-text {
    padding-left: 12px !important;
  }

  .essay-title {
    padding-left: 9px;
  }

  .essay-slideshow {
    padding-left: 0px !important;
    margin-left: 10px;
  }

  .essay-slide {
    padding: 8px 50px 10px 40px;
  }
}


@media screen and (max-width: 500px) {
  .title-text {
  	font-size:5em;
    padding: 45px 25px 35px 25px;
  }
}