a
{
 font-weight: bold;
 font-family: arial;
 font-size: 16pt;
 text-decoration: none;
}



a:link, a:visited
{
color: #006600;

}

a:hover
{
color: #000000;
}

.other_links {

 font-weight: normal;
 font-family: arial;
 font-size: 11pt;
 text-decoration: underline;

}

.mailto
{
 font-weight: bold;
 font-family: arial;
 font-size: 12pt;
 
}

body
{
background-color: #cccc33;
}

H1
{
color: #006600;
font-family: arial;

}

H2
{
color: #006600;
font-family: arial;
font-style: italic;
text-decoration: underline;
font-size: 32pt;
}

p{
font-family: arial;
padding-left: 3%;
padding-right: 3%;
text-indent: 40px;
text-align: justify;
}

ul{
font-family: arial;

padding-right: 3%;
padding-left: 10%;

}

.li_underline{
text-decoration: underline;
margin-bottom:6pt;
}

.li_bold{
font-weight: bold;
margin-top:6pt;
margin-bottom:2pt;
}

.menu{
font-family: arial;
}



.logo
{
position: absolute;

top: 0%;
left: 8%;
width: 15%;
height: 20%;

background-color: #cccc33;

text-align: center;
}

.logo img{
height: 100%;
width:auto;
}

.header_top
{
position: absolute;

top: 0%;
width: 65%;
height: 20%;
left:25%;

background-color: #cccc33;

text-align: center;
}

.header_top img{
  position:absolute; 
  margin: auto;
  
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
width: 100%;	  
  
overflow: hidden;
}

.leftsection
{
position: absolute;
top:20%;
left: 5%;
width: 17%;
height: 30%;

background-color: #cccc33;

text-align: left;

}

.leftsection_bottom
{
position: absolute;
top:50%;
left: 5%;
width: 17%;
height: 45%;

background-color: #cccc33;
border-top: 3px solid #ffffee;

text-align: left
}

.rightsection
{
position: absolute;
top:20%;
left: 22%;
width: 56%;
height: 75%;

background-color: #ffffee;

text-align: justify;
overflow: auto;
}

.useful_links
{
position: absolute;
top:20%;
right: 5%;
width: 17%;
height: 75%;
border-left: 3px solid #cccc33;

background-color: #ffffee;


text-align: left;
overflow: auto;
}

.footer
{
position: absolute;
top: 97%;
left:0%;
width: 100%;
border-top: 2px solid grey;

text-align: center
}

.links{
position: relative;
left:0%;
width: 100%;
height: 25%;
padding: bottom;
background-color: #cccc33;
padding-left:10%;
display: flex;
        align-items: center;
        justify-content: left;


border-top: 3px solid #ffffee;
border-left: 3px solid #ffffee;
}

.activelink{
position: relative;
left:0%;
width: 100%;
height: 25%;
padding: bottom;
background-color: #ffffee;
padding-left:10%;
display: flex;
        align-items: center;
        justify-content: left;
}


.presentation{
position: absolute;
left:0%;


height: 50%;

background-color: #ffffee;
padding-left:8%;


font-weight: bold;
font-family: arial;
font-size: 22pt;

}

@keyframes appear {
  0%{ opacity: 0; }
  
  100% { opacity: 1; }
}

.presentation h2{
opacity: 0;
animation: appear 5s; 
animation-fill-mode: forwards;}

.presentation h2:nth-child(1) { animation-delay: 0s;  }
.presentation h2:nth-child(2) { animation-delay: 3s;  }
.presentation h2:nth-child(3) { animation-delay: 6s;  }
.presentation h2:nth-child(4) { animation-delay: 9s;  }

.slideshow { 
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
  margin-top: 20px;
  
}
@keyframes fade {
  0%{ opacity: 0; }
  10%{ opacity: 1; }
  20%{ opacity: 1; }
  30%{ opacity: 1; }
  40%{ opacity: 0; }
  50%{ opacity: 0; }
  60%{ opacity: 0; }
  70%{ opacity: 0; }
  80%{ opacity: 0; }
  90%{ opacity: 0;} 
  100% { opacity: 0; }
}	

.slideshow img { 
  position:absolute; 
  margin: 0 auto;
  width: 100%;
  height: auto;
  
  overflow: hidden;
  opacity:0; 
  animation-name: fade; 
  animation-duration: 20s; 
  animation-iteration-count: infinite; 
}
.slideshow img:nth-child(1) { animation-delay: 0s;  }
.slideshow img:nth-child(2) { animation-delay: 5s;  }
.slideshow img:nth-child(3) { animation-delay: 10s;  }
.slideshow img:nth-child(4) { animation-delay: 15s;  }