/*
Light green: a0c55f;
Dark blue: 2a044a
*/

:root {
  --green1: #F2FEDC;
  --green2: #C4E538;
  --green3: #63CE64;
  --green4: #00B083;
  --green5: #008E8D;
  --green6: #006A7D;
  --green7: #2F4858;

  --green8: #2a044a;

  --bkg: #21242B;

  --bkg: #525662;

  --black: #1B1D23;

  --black: #08090A;
  --white: white;

  --contrast: #eb3b5a; /* FUCSIA */

  --logos: 'Roboto Slab', sans-serif;
  --logos: 'Noto Serif Display', sans-serif;
  --heading: 'Poppins', sans-serif;

  --maxwidth: 900px;
}

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  font-size: .96em;
  margin: 0;
  padding: 0;
  line-height: 1.4em;
  color: var(--green1);
  background: var(--black);
}

#mainheader {
  position: fixed;
  top: 0;
  width: 100%;
  /* border-bottom: 1px solid #eee; */
  padding: .6em 0 .4em;
  /* background: var(--bkg); */
  color: var(--white);

  background: linear-gradient(238deg, #fd8800, #fd008f, #9700fd, #003dfd, #05c7e6, #4bd58d);
  background-size: 1200% 1200%;
  -webkit-animation: rainbow 60s ease infinite;
  animation: rainbow 60s ease infinite;
  opacity: .9;
}



#mainheader:hover {
  opacity: 1;
}

@-webkit-keyframes rainbow {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}

@keyframes rainbow {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}


.sectionin {
  margin: 0 auto;
  max-width: var(--maxwidth);
}

#focus {
  background: var(--black);
  overflow: auto;
}

#focusin {
  padding: 8em 0 2em;
}

#gallery {
  background: var(--bkg);
}

#galleryin {
  width: var(--maxwidth);
  margin: 0 auto;
  padding: 3em 0 2em;
}

#mainheaderin {
  width: var(--maxwidth);
  margin: 0 auto;
}

#maincontent {
  overflow: auto;
  padding: 3em 0 3em;
  background: var(--white);
  color: var(--black);
}

#maincontentin {
  width: var(--maxwidth);
  margin: 0 auto;
}

#itemheader {
  /* background: var(--bkg); */
  /* background: linear-gradient(238deg, #525662, #000); */
  background: #fff;
  color: black;
  /* color: var(--white); */
  border-bottom: .4em solid;
}

#itemheaderin {
  width: var(--maxwidth);
  margin: 0 auto;
  padding: 8em 0 1em;
}

#mainright {
  float: right;
  width: 28%;
  margin: 0 0 1em 1em;
}

#mainleft {
  width: 68%;
}

#mainleftin {
}

#enkidu, #enkidu a {
  font-family: var(--logos);
  font-weight: 800;
  color: var(--contrast);
  text-decoration: none;
}

#enkidu a:hover {
  text-decoration: underline;
}

#mainheader #logo {
  font-family: var(--logos);
  font-weight: 900;
  letter-spacing: .2em;
  font-size: 1.2em;
  padding: .2em 0 0;
  margin: 0;
  background-size: 1em;
}

#symbol {
  border: .2em solid;
  border-radius: 10em;
  width: 1em;
  height: 1em;
  line-height: 0;
  float: left;
  margin: 0 .4em 0 0;
}

#mainheader a {
  text-decoration: none;
  color: #2a044a;
  color: var(--white);
}

#mainnav ul, #mainnav li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#mainnav a {
  padding: .3em .2em .2em .8em;
  float: right;
  display: block;
  font-size: .9em;
  text-decoration: none;
  color: var(--white);
}

/* #maincontent h1 {
  line-height: .9em;
  margin-bottom: .2em;
  font-family: var(--heading);
} */

#names {
  font-weight: 100;
  font-size: 2.4em;
  letter-spacing: .1;
  line-height: 1em;
  margin: 0;
  padding: 0;
  font-family: var(--heading);
}

h1 {
  font-family: var(--heading);
  font-size: 4em;
  font-weight: 300;
  margin: 0 0 .2em;
  padding: 0;
  line-height: .8em;
}

h2 {
  color: var(--white);
  margin-top: 0;
  font-family: var(--heading);
  font-size: 3em;
  font-weight: 600;
}

.h21 {
  margin-top: .2em;
}

h3 {
  font-family: var(--heading);
  margin-bottom: .2em;
  font-size: 1.6em;
  font-weight: 300;
}

h4 {
  margin-bottom: 0;
}

.tessella {
  width: 20%;
  float: left;
}

.tessellain {
  margin: .6em;
}

.tessella p {
  font-size: .8em;
  margin: .6em 0;
  line-height: 1em;
  text-align: center;
  height: 1.6em;
}

.tessella a {
  color: #2a044a;
  text-decoration: none;
}

.tslthumbnail {
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 100em;
  height: 0;
  width: 100%;
  padding-bottom: 98%;
  border: 3px solid white;
}

.contrast {
  color: var(--contrast);
  font-weight: 600;
}

.row {
  padding: .2em 0;
}

.label {
  font-family: var(--heading);
  margin-right: .4em;
  font-weight: 600;
}

label {
  width: 20%;
  display: inline-block;
  text-align: right;
  color: #999;
  margin-right: 1em;
  vertical-align: top;
  padding: .6em .2em;
}

.submit {
  margin: 2em 0 2em 23%;
}

.row div {
  width: 60%;
  display: inline-block;
  padding: .2em;
}

form .note {
  margin: 0;
  padding: 0;
  padding: .2em 0;
  color: #666;
  font-style: italic;
}

form img {
  width: 20em;
}

textarea {
  width: 60%;
  height: 12em;
  font-size: .8em;
  padding: .2em;
  border: 1px solid #ddd;
  border-radius: .3em;
  width: 98%;
}

.inputtitle {
  height: 4em;
}

input[type=text], input[type=number] {
  font-size: .8em;
  padding: .2em;
  border: 1px solid #ddd;
  border-radius: .3em;
  background: white;
  width: 98%;
}

.greyout {
  border: none !important;
  color: #999;
}

.half {
  width: 50% !important;
}

#search {
  float: right;
  margin: 0 0 0 1em;
  padding: 0;
}

#inpsearch {
	border: none;
	border-radius: 10em;
	-webkit-appearance: none;
	line-height: 1em;
	font-size: 1em;
  padding: .2em .1em .1em;
	margin: 0;
	display: inline-block;
	background: rgba(255, 255, 255, .8) url('/images/ico-search-filled.png') .2em/1.2em no-repeat;
	box-sizing: border-box;
	width: 1.7em;
	cursor: pointer;
}

#inpsearch:focus {
	cursor: text;
	background: rgba(255, 255, 255, .8) url('/images/ico-search-filled.png') .2em/1.6em no-repeat;
	width: 16em;
	padding-left: 2.4em;
	outline: none !important;
}

#inpsearch:hover {
	background-color: #fff;
}

input[type=number] {
  width: 30%;
}

select, input[type=file] {
  font-size: 1em;
}

select[multiple] {
  font-size: .8em;
  width: 98%;
  height: 12em;
  border: 1px solid #ddd;
  border-radius: .3em;
}

input[type=submit] {
  background: #34cd10;
  font-size: 1em;
  border: none;
  color: white;
  padding: .4em .6em;
}

.half {
  width: 50%;
}

.thumbnail {
  width: 100%;
  height: 0;
  margin: 0;
  padding-bottom: 100%;
  background-size: cover;
  display: block;
  border-bottom: 1px solid white;
}

#rank, #more {
  list-style: none;
  margin: 0;
  padding: 0;
}

#rank li, #more li {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
  line-height: 2em;
  border-bottom: 1px solid #fff;
}

#rank a, #more a {
  display: inline-block;
  margin: 0;
  padding: 0;
  text-decoration: none;
  width: 100%;
  color: #2a044a;
  color: var(--green7);
}

#more li {
  border-bottom: 1px solid #2a044a;
}

#rank a:hover, #more a:hover {
  background: var(--contrast);
  color: white !important;
  box-sizing: border-box;
}

#pendell {
  font-family: var(--logos);
  font-weight: 900;
  font-size: .8em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.color1 {
  background-color: var(--green1);
}

.color2 {
  background-color: var(--green2);
}

.color3 {
  background-color: var(--green3);
}

.color4 {
  background-color: var(--green4);
  color: var(--green1) !important;
}

.color5 {
  background-color: var(--green5);
  color: var(--green1) !important;
}

.color6 {
  background-color: var(--green6);
  color: var(--green1) !important;
}

.color7 {
  background-color: var(--green7);
  color: var(--green1) !important;
}

.frame {
  width: 33.3%;
  float: left;
}

.framein {
  margin: .2em;
}

.frame img {
  width: 100%;
}

.caption {
  font-size: .9em;
  margin: .2em 0;
  line-height: 1.2em;
}

.clear {
  clear: both;
}

#enkfooter {
  clear: both;
  padding: 0;
  color: #999;
  border-top: 1px solid var(--contrast);
}

#mainfooter {
  background: var(--bkg);
  overflow: auto;
  color: var(--black);
}

#mainfooterin, #enkfooterin {
  width: var(--maxwidth);
  margin: 0 auto;
}

.alert {
  border: .4em solid black;
  padding: 0 1em;
  margin: 1em 0;
}

.alert p {
  margin: .6em 0;
}

.btnarrow {
	background-color: rgba(254,254,254,.8);
	border-radius: 3em;
	width: 3em;
	height: 3em;
	position: absolute;

	text-decoration: none;
	cursor: pointer;
	z-index: 2;
}

.btnarrow:hover {
	text-decoration: none;
	background-color: rgba(254,254,254,1);
}

.btnarrowclose {
	background: url('https://mithraeum.eu/images/ico-arrows.png') -6em top / 9em no-repeat;
	background-color: rgba(254,254,254,.2);
}

.btnarrowback {
	background: url('https://mithraeum.eu/images/ico-arrows.png') left top / 9em no-repeat;
	background-color: rgba(254,254,254,.2);
}

.btnarrowforward {
	background: url('https://mithraeum.eu/images/ico-arrows.png') -3em top / 9em no-repeat;
	background-color: rgba(254,254,254,.2);
}

.clear {
  height: .01em;
  line-height: .01em;
}

@media screen and (max-width: 900px) {
  :root {
    --maxwidth: 90%;
  }

  .tessella {
    width: 25%;
  }

}

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

  .half {
    width: 98%;
    float: none;
  }

  .names {
    font-size: 2em;
    font-weight: 200;
  }

  #maincontentin {
    /* margin: 6em auto 0; */
  }

  .tessella {
    width: 33.3%;
  }

  label {
    width: 100%;
    text-align: left;
    margin: 1em 0 .2em .4em;
  }

  .row div {
    width: 100%;
  }

  input[type=text], textarea {
    width: 96%
  }

  .submit {
    margin: 2em 0 2em 0;
  }

  #mainleft {
    float: none;
    width: 100%;
    order: 1;
  }
  #mainright {
    font-size: .9em;
    width: 34%;
    order: 2;
  }
}

@media screen and (max-width: 400px) {
  h1 {
    font-size: 2.6em;
  }

  #names {
    font-size: 1.2em;
    font-weight: 300;
  }
}