/* color scheme: ebf5df (light green), bad4aa (green), 306b34 (dark green), 0c3b0f (very dark green), 656176 (light gray), 534d56 (dark grey) */

@font-face { font-family: 'julius';
             src: url('JuliusSansOne-Regular.ttf') format('truetype'); 
}
@font-face { font-family: 'optima';
             src: url('Optima.ttf') format('truetype'); 
}

body {
  margin: 0px;
  padding: 0px;
  font-family: "optima", sans-serif;
  font-size: 14pt;
  line-height: 3ex;
}

h1 {
  font-family: "julius", serif;
  font-size: 4vw;
  padding: 3vw;
  margin-top: 0;
  text-align: center;
}

h2 {
  font-family: "julius", serif;
  color: #0c3b0f;
  font-weight: normal;
}

/* navigation */
nav {
  background-color: #bad4aa;
  color: #000;
  padding: 15px;
  font-family: 'julius';
  font-size: 4.7vw;
/*  font-size: x-large;*/
  text-align: center;
  line-height: 1.6;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  display: inline;
  padding: 10px;
}
/* navigation end */

a:link {
  color: #000;
}

a:hover {
  color: #fff;
  background-color: #616161;
  padding: 20px;  
  margin: -20px;
}


/* gallery bar */
.gallery_bar {
  text-align: center;
  font-family: "julius", serif;
  font-size: x-large;
  background-color: #bad4aa;
  color: #000;
  padding: 30px ;
  margin: 0px auto 30px; /* top left+right bottom */
}
.gallery_bar a:hover {
  color: #fff;
  background-color: #534d56;
  padding: 20px;  
  margin: -20px;
}
/* gallery bar end */

/* content formatting */
.whitebg {
  background-color: #fff;
  padding: 30px;
  overflow: hidden;
}
.lightbg {
  background-color: #ebf5df;
  padding: 30px; 
  overflow: hidden;
}
.content {
  padding: 0px;
  padding-top: 0px;
}
.right h2 {
  padding-left: 30px;
  padding-bottom: 0px;
}
.left h2 {
  padding-left: 30px;
  padding-bottom: 0px;
}
/* content formatting end */



/* footer block */
.dark {
  background-color: #616161;
  color: #fff;
  padding: 15px;
}
.dark a:link {
  color: #fff;
}
.dark a:hover {
  color: #000;
  background-color: #f3f3f3;
  padding: 20px;  
  margin: -20px;
}
footer {
  display: block;
  background-color: #534d56;
  padding: 15px;
  color: #ffffff;
  font-family: 'julius';
  font-size: x-large;
  text-align: center;
  line-height: 1.6;
}
footer ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
footer ul li {
  display: inline;
  padding: 10px;
}
/* footer block end */


/* slider block */
#slider{
  max-width:100vw;
  position:relative;
  overflow:hidden;
  margin: auto;
}
@keyframes load{from{left:-100%}to{left:0}}
.slides{
  width:400%; /* 100 times amount of pictures */
  height:100%;
  position:relative;
  -webkit-animation:slide 30s infinite;
  -moz-animation:slide 30s infinite;
  animation:slide 30s infinite
}
.slider{
  width:25%;
  height:100%;
  float:left;
  position:relative;
  z-index:1;
  overflow:hidden
}
.slide img{
  width:100%;
  height:100%
}
.image{
  width:100%;
  height:100%
}
.image img{
  width:100%;
  height:100%
}
/* sliding movement */
@-webkit-keyframes slide{
0%,100%{margin-left:0%}21%{margin-left:0%}25%{margin-left:-100%}46%{margin-left:-100%}50%{margin-left:-200%}71%{margin-left:-200%}75%{margin-left:-300%}96%{margin-left:-300%}}
@-moz-keyframes slide{
0%,100%{margin-left:0%}21%{margin-left:0%}25%{margin-left:-100%}46%{margin-left:-100%}50%{margin-left:-200%}71%{margin-left:-200%}75%{margin-left:-300%}96%{margin-left:-300%}}
@keyframes slide{
0%,100%{margin-left:0%}21%{margin-left:0%}25%{margin-left:-100%}46%{margin-left:-100%}50%{margin-left:-200%}71%{margin-left:-200%}75%{margin-left:-300%}96%{margin-left:-300%}}
/* slide text onto img */
/* @-webkit-keyframes content-s{
0%{left:-420px}10%{left:0}30%{left:0}40%{left:0}50%{left:0}60%{left:0}70%{left:0}80%{left:-420px}90%{left:-420px}100%{left:-420px}}
@-moz-keyframes content-s{
0%{left:-420px}10%{left:0}30%{left:0}40%{left:0}50%{left:0}60%{left:0}70%{left:0}80%{left:-420px}90%{left:-420px}100%{left:-420px}}
@keyframes content-s{
0%{left:-420px}10%{left:0px}15%{left:0}30%{left:0}40%{left:0}50%{left:0}60%{left:0}70%{left:0}80%{left:-420px}90%{left:-420px}100%{left:-420px}} */
/* ?? */
@-webkit-keyframes on{
0%,100%{margin-left:0%}21%{margin-left:0%}25%{margin-left:15px}46%{margin-left:15px}50%{margin-left:30px}71%{margin-left:30px}75%{margin-left:45px}96%{margin-left:45px}}
@-moz-keyframes on{
0%,100%{margin-left:0%}21%{margin-left:0%}25%{margin-left:15px}46%{margin-left:15px}50%{margin-left:30px}71%{margin-left:30px}75%{margin-left:45px}96%{margin-left:45px}}
@keyframes on{
0%,100%{margin-left:0%}21%{margin-left:0%}25%{margin-left:15px}46%{margin-left:15px}50%{margin-left:30px}71%{margin-left:30px}75%{margin-left:45px}96%{margin-left:45px}}a{text-decoration:none;color:inherit}
/* slider block end */


/* Text-Image-Blocks */
.left, .right {
/*  float: left;
  width: 50%; */
  height: auto;
  padding: 0px;
  margin: auto;
}
.leftimg {
  max-width: 100%;
  min-width: 10%;
  height: auto;
  padding-right: 0px;
  margin-left: auto;
  margin-right: auto;
}
.rightimg {
  max-width: 100%;
  min-width: 10%;
  height: auto;
  padding-left: 0px;
  margin-left: auto;
  margin-right: auto;
}

/* media design */
@media only screen and (min-width: 1200px) {
  .nav {
  font-size: 2vw;
  }
  .left {
   float: left;
/*   width: 40%;*/
  }
  .right {
  float: right;
/*  width: 40%;*/
  }
  .left, .right {
  padding: 0px;
  width: 38vw;
  }
  .leftimg, .rightimg {
/*  width: 40vw;*/
/*  height: auto;*/
  }
  .leftimg {
  }
  .whitebg {
  padding-left: 10vw;
  padding-right: 10vw;
  }
/*  .full {
  width: 80vw;
  margin: auto;
  }*/
  .lightbg {
  padding-left: 10vw;
  padding-right: 10vw;
  margin: auto;
  }
}
/* media screen design end */