/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Work+Sans:400&display=swap&subset=latin-ext');
* {
   margin: 0; padding: 0; border:0}
html, body {
   display: flex;
   flex-direction: column; 
   font-family: 'Work Sans', sans-serif;
   color: black;
}
body {   
   background-image: url('bg.jpg');
   background-repeat: repeat-y;
   background-position: center; 
   background-size: 100% auto;
   background-attachment: initial; 
}
header {   
   width: 98%;
   height: auto;
   margin: 5px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;   
   justify-content: center;
}
section {
   width: 65%;
   min-height: 75vh;
   align-items: center; 
   margin: 10px auto 2px auto;
   text-align: left;
}
footer {
width:75%;
   align-self: center;
   text-align:center;
   flex-wrap: wrap;   
   height: 18px;
   color: rgb(118,15,25);
   margin-top:5px;
   font-size: 18px;
   font-weight: bold;
   border-top: 2px solid rgb(210,35,51); 
}
nav { 
   width: 90%;
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
   margin-top: 2px;
}
.ln_menu {
   justify-content: flex-end;
   padding: 13px;
}
.l_menu {
   background-image: url('button_bg.png');
   background-position: center; 
   background-size: cover;
   padding: 15px;
   border-radius: 22px;
   font-size: 18px;
   font-weight: 1000;
   border-bottom: 3px solid rgb(210,35,51);
   border-right: 3px solid rgb(210,35,51);
   color:black;
}
a {
   text-decoration: none;
}
.mainmenu {
   color:rgb(162,67,25);
   font-size: 16px;
   font-weight: bold;
   width: 120px;
   text-align: center;
   background-color: rgba(196,159,102, 0.3);
   padding: 13px 13px;
   margin-right:3px;
   margin-bottom: 3px;
   cursor: pointer;
      border-radius: 22px; 
   border-bottom: 3px solid rgb(210,35,51);
   border-right: 3px solid rgb(210,35,51); 
}
h1 {
   font: 22px 700, 'Work Sans';
   color: rgb(118,15,25);
   line-height: 1.3;
   padding: 15px 0 3px 5px;
   margin:0;
   text-align: center;
}
h2 {
   font: 18px 700, 'Work Sans';
   line-height: 1.2;
   padding: 10px 0 3px 0;
   margin: 0;
   text-align: left;
}
h3 {
   font: 15px 500, 'Work Sans';
   line-height: 1.1;
   padding: 10px 0 3px 0px;
   margin: 0;
   text-align: left;
   font-style: italic;
}
h4 {
   font-size: 18px;
   line-height: 1.2;
   text-align:left;
   padding-left: 30px; 
}
h4 + p, h4+p+p, h4+p+p+p,h4+p+p+p+p {
    padding-left: 45px;
}
hr{
   margin-right: auto;
   border: 2px inset rgb(154,106,65);
} 
#hide {
   display: none;
}
#nohide {
   font-size: 16px;
   color: rgb(118,15,25);
   line-height: 1.2;
   margin: 5px;
   text-align: center;
}
.grouped_elements {
   padding-left: 15%; 
}
.dok {
   color: rgb(36,68,4);
}
.more {
   display: none;
   overflow:hidden;
}
.double {
   display:flex;
       flex-direction: row;
   flex-wrap: wrap;   
    width:100%;
}
.first{
    justify-content: flex-start;
   width: 40% ;
}
.mapa {
    width:50%;
    height: 60%; 
    padding: 10px;  
   margin: auto;
   padding: 5px;
}
iframe{
   width: 100%;
   height: 70%;
   margin: auto;
}
.collapsible {
    background-color: rgba(126,119,0,0.1);
    padding: 15px;
    margin-top: 5px;
    cursor:pointer;
    width: 100%;
    border: none;
    text-align: left;
    outline:none;
    font-size: 25px;
    border-radius: 22px;
    border-top: 3px solid rgb(210,35,51);
    border-left: 3px solid rgb(210,35,51);
}
.active, .collapsible:hover {
    background-color: rgba(167,130,89,0.4);
}
.border{
   border-width:5px;  
   border-style:ridge;
   border-color: rgb(153,211,75);
   display: flex;
   justify-content: center; 
   width: 50%;
   height: auto;
   margin: 10px auto;
}
#main {
   height: 25%;
   position: absolute;
   z-index: -1; 
   bottom: 4vh; 
}  
#frogs {
   width: 100% ;
   align-items: center;
   margin: 0 auto;
   display: flex;
   justify-content: center; 
}
#foto {
    width: 40%;
    height: auto;
    position: absolute;
    z-index:-1;
    bottom:5%;
    right:12%;
    padding-top:5px;
}
.go{
   height: 37px;
   width: 100%;
}
.anim {
   width: 2000px;
   height: 20px;
   overflow: hidden;
   white-space: nowrap;  
   font-size: 19px;
   margin: 5px;
   padding: 3px;
  -webkit-animation-name: slide; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 20s; /* Safari 4.0 - 8.0 */
  -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
   animation-name: slide;
   animation-duration: 30s;
}
@keyframes slide {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.button:hover {
   background-color: rgb(183,194,190);
   color: black;
} 
.l_menu:hover {
   color: darkgreen;
}
 .dok:visited {
   color: rgb(143,105,69);
 }
