/* Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.  */
html {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}

/*----------- apply a natural box layout model to all elements --------------*/
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/*----------- BODY --------------*/
body {
  font-size: 16px;
  font-family: 'Amiri', Verdana, sans-serif;
  min-width: 320px;
  margin: 0;
}

/*----------- BORDER --------------*/
.border {
  display: none;
}

/*----------- HEADER --------------*/
header {
  padding: .5rem 2%;
  background-color: #00572f;
  display: grid;
  grid-template-columns: 185px auto;
}
header .slogan {
  display: none;
}
header figure {
  margin: 0;
}
header button {
  margin: 1rem 2%;
  background-color: transparent;
  border: none;
  font-size: 3rem;
  color: #555;
}
header h1 {
  margin: 0;
  margin-top: 1rem;
  font-weight: bold;
  font-size: 40px;
  color: #0e2043;
  text-shadow: -5px 0px 5px #d48f2a, 0px 5px 5px #d48f2a, 5px 0px 5px #d48f2a, 0px -5px 5px #d48f2a;
}
header h2 {
  margin: 0;
  font-weight: normal;
  font-size: 30px;
  color: #0e2043;
  text-shadow: -5px 0px 5px #d48f2a, 0px 5px 5px #d48f2a, 5px 0px 5px #d48f2a, 0px -5px 5px #d48f2a;
}

/*----------- NAVIGATION --------------*/
nav {
  background-color: #00572f;
}
nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
nav ul li a {
  display: block;
  color: #0e2043;
  border-top: 1px solid rgba(0,0,0,0.3);
  padding: .5rem 0;
  text-decoration: none;
  font-size: 20px;
  text-align: center;
  text-shadow: -5px 0px 5px #d48f2a, 0px 5px 5px #d48f2a, 5px 0px 5px #d48f2a, 0px -5px 5px #d48f2a;
}
nav ul li a:hover {
  background-color: #d48f2a;
  color: #0e2043;
}
nav ul li.active a {
  background-color: #0e2043;
  color: #00572f;
  text-shadow: -5px 0px 5px #0e2043, 0px 5px 5px #0e2043, 5px 0px 5px #0e2043, 0px -5px 5px #0e2043;
}
nav ul.hide {
  display: none;
}

/*----------- MAIN --------------*/
main {
  padding: 2%;
  min-height: 10rem;
}
main h1 {
  font-weight: bold;
  font-size: 40px;
  color: #0e2043;
  text-shadow: 4px 4px 4px #aaa;
}
Main h2 {
  margin-bottom: 0;
  font-weight: normal;
  font-size: 30px;
  color: #0e2043;
  text-shadow: 4px 4px 4px #aaa;
}
main .herodiv, main .herodiv2 {
  width: 100%;
  padding: .5rem 2%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
main .herodiv figure {
  width: 100%;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
}
main .herodiv2 figure {
  width: 30%;
  padding: 0;
  margin-left: 14rem;
  margin-right: auto;
}
main .herodiv .actioncall, main .herodiv2 .actioncall {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: radial-gradient(transparent, #00572f);
  border: 1px solid #000;
  padding: 0.2rem;
  box-shadow: 0 0 30px #fff;
}
main .herodiv .actioncall button, main .herodiv2 .actioncall button {
  border: none;
  background-color: #0e2043;
  color: black;
  border-radius: 1rem;
  padding: .75rem 1.5rem;
  width: 96%;
  max-width: 20rem;
}
main .herodiv .actioncall h3, main .herodiv2 .actioncall h3 {
  margin: 0.5rem;
}
main .herodiv .actioncall p, main .herodiv2 .actioncall p {
  margin: 0.2rem;
}
main .row {
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0.2rem;
}
main .row section:nth-child(3){
  margin-left: 2%;
}
main .row figure figcaption {
  padding: 1%;
  text-align: center;
}
main .gallery {
  display: flex;
  flex-wrap: wrap;
}
main .gallery figure {
  flex-basis: 96%;
  margin: 1rem 2%;
  border-style: ridge;
  border-color: #0e2043;
  border-width: 6px;
  padding: 1%;
  transition: all .2s ease-in-out;
}
main .gallery figure figcaption {
  padding: 1%;
  text-align: center;
}
main .gallery figure:hover {
  transform: scale(1.05);
}
main .gallery figure img {
  width: 100%;
}
main img {
  width:100%;
  margin-right: auto;
  margin-left: auto;
}
/*main .pchide, main .dpchide, main .crownhide, main .activehide, main .inactivehide, main .deadhide, main .targethide, main .legacyhide {
  display: none;
}*/
main .relic ul li, main .journal ul li, main .gishvit ul li, main .journalplay ul li{
  text-indent: 2rem;
}

/*----------- Slideshow --------------*/
#slideshow:after {
  content: "";
  display: table;
  clear: both;
}
#slideshow img {
  float: left;
  margin: 0 -100% 0 0;
}

/*----------- FORM --------------*/
form {
  display:flex;
  flex-wrap: wrap;
  flex-basis: 96%;
}
form fieldset {
  margin: 2rem 2%;
  border: 1px solid #0e2043;
  border-radius: 10px;
  padding: .5rem 2%;
}
form legend {
  color: #0e2043;
  margin: 0 1rem;
  padding: 0 .5rem;
}
form label.top, form div, form label.slide {
  display: block;
  padding-top: 1rem;
  color: #0e2043;
  font-size: .8rem;
}
form label.top input, form label.top select {
  -webkit-appearance: none;
  display: block;
  font-size: 1rem;
  border: solid 1px #999;
  border-radius: 4px;
  padding: .75rem;
  color: #555;
  width: 100%;
  max-width: 25rem;
  background-color: rgba(0,0,0,0.1);
}
form label.sbs {
  display: block;
  padding: .75rem 0;
  color: #555;
}
form label.slide input {
  display: block;
  font-size: 1rem;
  border: solid 1px #999;
  border-radius: 4px;
  padding: .75rem;
  color: #555;
  width: 100%;
  max-width: 25rem;
  background-color: rgba(0,0,0,0.1);
}
form input.submitBtn {
  border: none;
  background-color: #0e2043;
  color: black;
  border-radius: 1rem;
  padding: .75rem 1.5rem;
  margin: 0 0 2rem 2%;
  width: 96%;
  max-width: 25rem;
}
form label.top input:required {
  border-left: red solid 6px;
}
form label.top input:required:valid {
  border-left: green solid 6px;
}
form label.top textarea {
  margin: 2% 0;
  width: 100%;
  max-width: 56rem;
  height: 8rem;
}

/*----------- ARTICLE (JSON READ) --------------*/
main .prison, main .active, main .dead, main .dpc, main .pc, main .inactive, main .legacy, main .target, main .crown, main .asset, main .agent, main .secrown {
  display: flex;
  flex-wrap: wrap;
}
main .prison article, main .secrown article, main .active article, main .dead article, main .dpc article, main .pc article, main .inactive article, main .legacy article, main .target article, main .crown article, main .asset section, main .agent article {
  margin: 1rem 2%;
  flex-basis: 96%;
  border-style: ridge;
  border-color: #0e2043;
  border-width: 6px;
  padding: 1%;
  transition: all .2s ease-in-out;
}
main .prison article img, main .secrown article img, main .active article img, main .dead article img, main .dpc article img, main .pc article img, main .inactive article img, main .legacy article img, main .target article img, main .crown article img, main .asset section img, main .agent article img {
  width: 100%;
}
main .prison article:hover, main .secrown article:hover, main .active article:hover, main .dead article:hover, main .dpc article:hover, main .pc article:hover, main .inactive article:hover, main .legacy article:hover, main .target article:hover, main .crown article:hover, main .asset section:hover, main .agent article:hover {
  box-shadow: 0 0 12px #555;
  transform: scale(1.05);
  cursor: pointer;
}
main .helpful {
  background-color: #0e2043;
  color: #d48f2a;
  border-color: #d48f2a;
}
main .helpful h2, main .hostile h2 {
  color: #00572f;
  text-shadow: -5px 0px 5px #d48f2a, 0px 5px 5px #d48f2a, 5px 0px 5px #d48f2a, 0px -5px 5px #d48f2a;
}
main .hostile {
  background-color: rgba(0,0,0,1);
  color: white;
  border-color: #d48f2a;
}
main .locked {
  background-color: rgb(128, 128, 128);
  color: rgba(0,0,0,1);
  border-color: #d48f2a;
}
main .friendly {
  background-color: #90EE90;
  color: rgba(0,0,0,1);
  border-color: #d48f2a;
}
main .unfriendly {
  background-color: #F08080;
  color: rgba(0,0,0,1);
  border-color: #d48f2a;
}

/*---START toggleClass sub-CSS---*/
main .prison article p, main .secrown article p, main .active article p, main .dead article p, main .dpc article p, main .pc article p, main .inactive article p, main .legacy article p, main .target article p, main .crown article p, main .asset section p, main .agent article p {
  display: none;
}
main .prison article ul, main .secrown article ul, main .active article ul, main .dead article ul, main .dpc article ul, main .pc article ul, main .inactive article ul, main .legacy article ul, main .target article ul, main .crown article ul, main .asset section ul, main .agent article ul {
  display: none;
}
main .prison .click p, main .secrown .click p, main .active .click p, main .dead .click p, main .dpc .click p, main .pc .click p, main .inactive .click p, main .legacy .click p, main .target .click p, main .crown .click p, main .asset .click p, main .agent .click p {
  display: block;
}
main .prison .click ul, main .secrown .click ul, main .active .click ul, main .dead .click ul, main .dpc .click ul, main .pc .click ul, main .inactive .click ul, main .legacy .click ul, main .target .click ul, main .crown .click ul, main .asset .click ul, main .agent .click ul {
  display: block;
}
/*---END toggleClass sub-CSS---*/
main .prison p:nth-of-type(3), main .secrown p:nth-of-type(3), main .active p:nth-of-type(3), main .pc p:nth-of-type(3), main .inactive p:nth-of-type(3), main .legacy p:nth-of-type(3), main .target p:nth-of-type(3), main .crown p:nth-of-type(3), main .agent p:nth-of-type(3) {
  display: none;
}
main .dead p:nth-of-type(4), main .legacy p:nth-of-type(4) {
  display: none;
}
main .dead ul, main .legacy ul {
  display: none;
}
main .dead li, main .legacy li {
  display: none;
}
main .hide {
  display:none;
}
main article .hide {
  display:none;
}
main ul {
  cursor: pointer;
}

/*----------- CONTACT --------------*/
body .contact {
  padding: 0 2%;
}
body .contact p {
  margin: 0.2rem;
}
body .contact h2 {
  margin: 0;
}

/*----------- #GLASS --------------*/
#glass {
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  display: none;
  background-repeat: no-repeat;
  background-color: rgba(0,0,0,.6);
}

/*----------- FOOTER --------------*/
footer {
  background-color: #00572f;
  color: #0e2043;
  padding: .5rem 2%;
  text-align: center;
  clear: both;
}

/*----- Clearfix: Force an Element not to collapse -----*/
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}