/* -------- font -------- */

@font-face
{
  font-family:'latoregular';
  src:url('../font/lato-regular-webfont.woff2') format('woff2'),
  url('../font/lato-regular-webfont.woff') format('woff');
  font-weight:normal;
  font-style:normal;
}


/* -------- overwrite -------- */

div, input, select, textarea
{
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

input, select, textarea, button
{
  font-size:inherit;
  font-family:inherit;
  color:inherit;
  padding:5px;
}

button:hover
{
  opacity:0.8;
  cursor:pointer;
}

body
{
  margin:0;
  padding:0 20px 0 20px;
  font-family:"latoregular", sans-serif;
  color:#003000;
  font-size:18px;
}

@media (max-width:768px)
{
  body
  {
    font-size:15px;
  }
}

a
{
  outline:none;
  text-decoration:none;
  color:#006022;
}

a:hover
{
  color:#226622;
}

/* -------- header -------- */

.topsfat
{
  position:absolute;
  left:150px;
  top:5px;
  font-size:0.7em;
}

@media (max-width:768px)
{
  .topsfat
  {
    left:50px;
  }
}

.topheader
{
  margin-bottom:10px;
  padding:10px;
  text-align:right;
  font-size:0.7em;
}


@media (max-width:768px)
{
  .topheader
  {
    margin-top:20px;
  }
}

.headermenu img
{
  position:absolute;
  width:100px;
  left:5px;
  top:5px;
}

@media (max-width:768px)
{
  .headermenu img
  {
    width:30px;
  }
}

.headermenu .menu
{
  text-align:center;
  margin-bottom:20px;
  height:52px;
}

.headermenu .menu .menuitem
{
  display:inline-block;
  text-transform:uppercase;
  padding:15px;
  font-size:0.7em;
}

.headermenu .submenu
{
  text-align:center;
  height:52px;
}

.headermenu .submenu .menuitem
{
  display:inline-block;
  text-transform:uppercase;
  padding:15px;
  font-size:0.7em;
}

@media (max-width:768px)
{
  .headermenu .menu
  {
    margin-bottom:5px;
    height:inherit;
  }

  .headermenu .menu .menuitem
  {
    padding:5px;
    font-size:0.9em;
  }

  .headermenu .submenu .menuitem
  {
    padding:5px;
    font-size:0.9em;
  }
}

.headermenu .menu .menuitem.selected, .headermenu .submenu .menuitem.selected
{
  border-bottom:solid 2px #603010;
}

.headermenu .menu .menuitem:hover, .headermenu .submenu .menuitem:hover
{
  border-bottom:solid 1px #603010;
}

.headerimg
{
  position:relative;
  margin:0 0 30px 0;
}

.headerimg .pagetitle
{
  font-size:2em;
  position:absolute;
  left:30px;
  top:10px;
  text-shadow:2px 2px 5px #AA9988;
}

@media (max-width:768px)
{
  .headerimg
  {
    margin:0 0 5px 0;
  }

  .headerimg .pagetitle
  {
    font-size:1.2em;
    left:10px;
    top:0;
    line-height:22px;
  }

}

.headerimg img
{
  width:100%;
}


/* -------- tail -------- */

.tail
{
  margin-top:20px;
  padding:10px;
  text-align:center;
  font-size:0.7em;
  background-color:#B2BCAA;
}

/* -------- spinner https://projects.lukehaas.me/css-loaders/ -------- */

.loader, .loader:before, .loader:after
{
  border-radius:50%;
  width:2.5em;
  height:2.5em;
  -webkit-animation-fill-mode:both;
  animation-fill-mode:both;
  -webkit-animation:load7 1.8s infinite ease-in-out;
  animation:load7 1.8s infinite ease-in-out;
}

.loader
{
  display:none;
  font-size:10px;
  text-indent:-9999em;
  -webkit-transform:translateZ(0);
  -ms-transform:translateZ(0);
  transform:translateZ(0);
  -webkit-animation-delay:-0.16s;
  animation-delay:-0.16s;
}

.loader:before, .loader:after
{
  content:'';
  position:absolute;
  top:0;
}

.loader:before
{
  left:-3.5em;
  -webkit-animation-delay:-0.32s;
  animation-delay:-0.32s;
}

.loader:after
{
  left:3.5em;
}

@-webkit-keyframes load7
{
  0%,
  80%,
  100%
  {
    box-shadow:0 2.5em 0 -1.3em;
  }
  40%
  {
    box-shadow:0 2.5em 0 0;
  }
}

@keyframes load7
{
  0%,
  80%,
  100%
  {
    box-shadow:0 2.5em 0 -1.3em;
  }
  40%
  {
    box-shadow:0 2.5em 0 0;
  }
}

/* -------- Content -------- */

.contenttitle
{
  font-size:2em;
  color:#603010;
  text-shadow:1px 1px 2px #004422;
  margin:20px 0 20px 0;
}

@media (max-width:768px)
{
  .contenttitle
  {
    font-size:1.5em;
  }
}

.contentsubtitle
{
  font-size:1.1em;
  margin:10px 0 5px 0;
  font-weight:bold;
}

.center
{
  text-align:center;
}

.contentline
{
  display:flex;
}

.contentlineright
{
  padding:0 0 0 20px;
}

@media (max-width:768px)
{
  .contentline
  {
    display:block;
  }

  .contentlineright
  {
    padding:10px 0 0 0;
  }
}

.source
{
  font-size:0.8em;
  font-style:italic;
  text-align:right;
  color:#304030;
}

.oneline
{
  display:flex;
  flex-direction:row;
  align-items:baseline;
}

.oneline div
{
  margin:0 10px 0 0;
}