.header {
background-color: #AAAAAA;
padding: 8px;
margin:0px;
font-size: 12px;
font-weight:bold;
font-family:"Verdana";
color: 00FFFF;
text-shadow: 2px 3px 3px #000000;
}
.cont {
  display:inline-block;
position: fixed;
  bottom: 10;
 left: 50%; 
font-weight:bold;
    font-size: 14px;
    font-family:Verdana;
    color: #FFFFFF;
  transform: translate(-50%, -50%);
  text-shadow: 2px 3px 3px #000000;
}
/* main menu */
#nav {
    display:inline-block;
    position: fixed;
    top:0;
    width:100%;
    margin:0px auto 0;
    padding:1; 
overflow: visible;
position: -webkit-sticky; /* Safari */
position: sticky;
    background:#7C7C7C url(ba.gif) repeat-x 0 -20px;
    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:1px;
    box-shadow:2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow: 0 2px 2px #00DBDB;
}

#nav li {
    margin: 5px;
    float: left;
left: 17%;
    position:relative;
    list-style:none;
  }
#nav a {
    font-weight:bold;
    font-size: 14px;
    font-family:Verdana;
    color: #FFFFFF;
    text-decoration:none;
    display:block;
    padding:6px 8px;
    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    text-shadow: 3px 3px 3px #000000;
}
/* selected menu element */
#nav .current a, #nav li:hover > a {
    color:#00FFFF;
     text-shadow: 2px 3px 3px #000000;
}
/* sublevels */
#nav ul li:hover a, #nav li:hover li a {
    background:#7C7C7C; 
    font-weight:bold;
    border:none;
    color:#fff;
    text-shadow:0 2px 4px rgba(0,0,0, 0.8);
}
#nav ul li a:hover {
    background:#AAAAAA url(ba.gif) repeat-x 0 -100px;
    color:#00FFFF;
    border-radius:2px; /*some css3*/
    -moz-border-radius:1px;
    -webkit-border-radius:1px;
    text-shadow:0 2px 4px rgba(0,0,0, 0.8);
    }
#nav ul li:first-child > a {
    -moz-border-radius-topleft:10px; /*some css3*/
    -moz-border-radius-topright:10px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
}
#nav ul li:last-child > a {
    -moz-border-radius-bottomleft:10px; /*some css3*/
    -moz-border-radius-bottomright:10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
}
/* drop down */
#nav li:hover > ul {
    opacity:1;
    visibility:visible;
padding:1;
}
#nav ul {
    opacity:2;
    visibility:hidden;
     width:178px;
    position:absolute;
    background:#7C7C7C url(ba.gif) repeat-x 0 0;
    border:2px solid #7788aa;
    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 2px 2px rgba(0,0,0, .4);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .4);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .4);
    -moz-transition:opacity .25s linear, visibility .1s linear .1s;
    -webkit-transition:opacity .25s linear, visibility .1s linear .1s;
    -o-transition:opacity .25s linear, visibility .1s linear .1s;
    transition:opacity .25s linear, visibility .1s linear .1s;
}
#nav ul li {
   float: left;
left: 1%;
    margin:0;
}
#nav ul a {
    font-weight:normal;
    text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
#nav ul ul {
    left:160x;
    top:0px;
}
  .crossfade .caption {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    text-shadow: 3px 3px 3px #000000;
    background-color: transparent;
    height: 85%;
    color: #fff;
    font-size: 28px;
   font-weight:bold;
}
.crossfade  > figure {
  animation: imageAnimation 45s linear infinite 0s;
  backface-visibility: hidden;
  background: fixed;
  background-size: cover;
  background-position: center center;
  color: transparent;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 75;
  margin: 0;
  width: 100%;
  height: 100%;
  z-index: 0;position: absolute;
}
.crossfade > figure:nth-child(1) { 
animation-delay: 0s;
background-image: url('../pics/ba6.jpg');
}
.crossfade > figure:nth-child(2) {
  animation-delay: 12s;
  background-image: url('../pics/ba8.jpg');
}
.crossfade > figure:nth-child(3) {
  animation-delay: 18s;
  background-image: url('../pics/ba11.jpg');
}
.crossfade > figure:nth-child(4) {
  animation-delay: 24s;
  background-image: url('../pics/ba10.jpg');
}
.crossfade > figure:nth-child(5) {
  animation-delay: 32s;
  background-image: url('../pics/ba3.jpg');
}
@keyframes 
imageAnimation {  0% {
 animation-timing-function: ease-in;
 opacity: 0;
}
 8% {
 animation-timing-function: ease-out;
 opacity: 1;
}
 17% {
 opacity: 1
}
 25% {
 opacity: 0
}
 100% {
 opacity: 0
}
}
/* styles for mobile */
@media only screen and (max-width: 1200px) {
	
#nav li {
       
margin: 5px;
left: 6%; 
}
#nav a {
    font-weight:bold;
    font-size: 14px;
}
/* styles for mobile */
@media only screen and (max-width: 992px) {
	
#nav li {
       overflow:hidden;
       
margin:3px;
left: 4%; 
}
#nav a {
    font-weight:bold;
    font-size: 13px;
}
.header {
font-size: 12px;
}
.crossfade  > figure {
  
  top: 62;
}
/* styles for mobile */

@media only screen and (max-width: 820px) {
	
#nav li {
       overflow:hidden;
margin: 2px;
 padding:1; 
left: 1%; 
}
#nav a {
    font-weight:bold;
    font-size: 12px;


}
.header {
font-size: 11px;
}

.cont {
    visibility:hidden;
 
}
.crossfade  > figure {
  
  top: 68;
}
/* styles for mobile */
@media only screen and (max-width: 420px) {

#nav li {
       overflow:hidden;
margin: 3px;
 padding:3; 
left: 5%; 
}
#nav a {
    
    font-size: 11px;
}
.header {
font-size: 10px;
}
.cont {
    visibility:hidden;
 
}