/* 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%;
  padding-left: 0;
  padding-bottom: 0;
  background-color: #5A7A9B;
  display: grid;
  grid-template-columns: 200px auto;
  gap: 2%;
}
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: #00572f;
  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: #00572f;
  text-shadow: -5px 0px 5px #d48f2a, 0px 5px 5px #d48f2a, 5px 0px 5px #d48f2a, 0px -5px 5px #d48f2a;
}

/*----------- NAVIGATION --------------*/
nav {
  background-color: #5A7A9B;
}
nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
nav ul li a {
  display: block;
  color: #00572f;
  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: #00572f;
}
nav ul li.active a {
  background-color: #00572f;
  color: #5A7A9B;
  text-shadow: -5px 0px 5px #00572f, 0px 5px 5px #00572f, 5px 0px 5px #00572f, 0px -5px 5px #00572f;
}
nav ul.hide {
  display: none;
}

/*----------- MAIN --------------*/
main {
  padding: 2%;
  min-height: 10rem;
}
main h1 {
  font-weight: bold;
  font-size: 40px;
  color: #00572f;
  text-shadow: 4px 4px 4px #aaa;
}
Main h2 {
  margin-bottom: 0;
  font-weight: normal;
  font-size: 30px;
  color: #00572f;
  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: 2rem;
  left: 2rem;
  background: radial-gradient(/*transparent,*/#fff, #d48f2a);
  color: #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: #00572f;
  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(2){
  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: #00572f;
  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 .relic ul li, main .journal ul li, main .gishvit ul li, main .journalplay ul li{
  text-indent: 2rem;
}*/
main ul {
  cursor: pointer;
}

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

/*----------- ARTICLE (JSON READ) --------------*/
main .active, main .crew, main .colonist, main .talasantri, main .pc, main .rpc, main .dpc, main .dead, main .leader, main .security, main .merchant, main .missing {
  display: flex;
  flex-wrap: wrap;
}
main .active article, main .crew article, main .colonist article, main .talasantri article, main .pc article, main .rpc article, main .dpc article, main .dead article, main .leader article, main .security article, main .merchant article, main .missing article {
  margin: 1rem 2%;
  flex-basis: 96%;
  border-style: ridge;
  border-color: #00572f;
  border-width: 6px;
  padding: 1%;
  transition: all .2s ease-in-out;
}
main .active article:hover, main .crew article:hover, main .colonist article:hover, main .talasantri article:hover, main .pc article:hover, main .rpc article:hover, main .dpc article:hover, main .dead article:hover, main .leader article:hover, main .security article:hover, main .merchant article:hover, main .missing article:hover {
  box-shadow: 0 0 12px #555;
  transform: scale(1.05);
  cursor: pointer;
}
main .active article img, main .crew article img, main .colonist article img, main .talasantri article img, main .pc article img, main .rpc article img, main .dpc article img, main .dead article img, main .leader article img, main .security article img, main .merchant article img, main .missing article img {
  width: 100%;
}
main .helpful {
  background-color: #5A7A9B;
  color: #FFF5EE;
  border-color: #d48f2a;
}
main .helpful h2, main .hostile h2 {
  text-shadow: -5px 0px 5px #d48f2a, 0px 5px 5px #d48f2a, 5px 0px 5px #d48f2a, 0px -5px 5px #d48f2a;
}
main .hostile h2 {
  color: #5A7A9B;
}
main .hostile {
  background-color: rgba(0,0,0,1);
  color: #FFF5EE;
  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;
}
main .indifferent {
  background-color: #FFF5EE;
}

/*---START toggleClass sub-CSS---*/
main .active p, main .crew p, main .colonist article p, main .talasantri article p, main .pc article p, main .rpc article p, main .dpc article p, main .dead article p, main .leader article p, main .security article p, main .merchant article p, main .missing article p {
  display: none;
}
main .active ul, main .crew ul, main .colonist article ul, main .talasantri article ul, main .pc article ul, main .rpc article ul, main .dpc article ul, main .dead article ul, main .leader article ul, main .security article ul, main .merchant article ul, main .missing article ul {
  display: none;
}
main .active .click p, main .crew .click p, main .colonist .click p, main .talasantri .click p, main .pc .click p, main .rpc .click p, main .dpc .click p, main .dead .click p, main .leader .click p, main .security .click p, main .merchant .click p, main .missing article .click p {
  display: block;
}
main .active .click ul, main .crew .click ul, main .colonist .click ul, main .talasantri .click ul, main .pc .click ul, main .rpc .click ul, main .dpc .click ul, main .dead .click ul, main .leader .click ul, main .security .click ul, main .merchant .click ul, main .missing article .click ul {
  display: block;
}
/*---END toggleClass sub-CSS---*/

/*---START toggleDisplay Alive/Dead---*/
main .colonist p:nth-of-type(3), main .talasantri p:nth-of-type(3), .crew p:nth-of-type(3), main .pc p:nth-of-type(3), main .rpc p:nth-of-type(3), main .leader p:nth-of-type(3), main .prison p:nth-of-type(3), main .security p:nth-of-type(3), main .merchant p:nth-of-type(3), main .missing p:nth-of-type(3) {
  display: none;
}
main .dead p:nth-of-type(4) {
  display: none;
}
main .dead ul {
  display: none;
}
main .dead li {
  display: none;
}
/*---START toggleDisplay Alive/Dead---*/

/*----------- #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: #5A7A9B;
  color: #00572f;
  padding: .5rem 2%;
  text-align: center;
  clear: both;
}

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