@charset "utf-8";
/* mien usedom */

*{
margin: 0px;
padding: 0px;
border:none;
}



body
{font-family: verdana, tahoma, sans-serif;
font-size:12px;
line-height:160%;
}

a
{
color: white;
text-decoration: none;
}

/* .................... navi ..................... */

.menu
{position:fixed !important;
position:absolute;
top:0;
left:0;
background-color:black;
width: 100%;
min-height: 45px;
max-height:136px;
font-size: 28px;
color: white;
text-align: center;
text-decoration: none;
z-index:1000;
}

.menu a
{color: white;
text-decoration: none;
	
	}
.menu ul li
{display:inline;
font-size: 14px;
padding:25px;          
letter-spacing:0.1em;
}

.menu ul
{padding:7px;          
text-align: center;
}


/* .................... main ..................... */




main
{background-color:#022f56;
width:100%; 
margin: -150px;
height:auto;
text-align: center;
z-index:2;
}

.slogan
{position: relative; 
margin: 85px auto 0 auto;
text-align: center;
z-index:2;
}

.product
{position: relative; 
margin: -25px auto 0px auto;
text-align: center;
color: white;
text-decoration: none;
z-index:2;
}

.headline
{position:relative;
width:100%;
height:auto;
margin: 111px auto 0 auto;
}



h2
{font-weight:bold;
color: white;
font-size: 43px;
font-style:italic;
letter-spacing: 1.3 em;
line-height: 140%;
margin: -50px auto 90px auto;
}

h4
{font-weight:bold;
color: #1d98a6;
font-size: 36px;
font-style:italic;
letter-spacing: 1.3 em;
line-height: 160%;
margin: -90px auto 0px auto;
}


h3
{font-weight:100;
color: white;
font-size: 23px;
letter-spacing: 1.2 em;
line-height: 160%;
margin: 70px auto 50px auto;
}


h7
{font-weight:bold;
color: white;
}

/*  ......................... footer ...............................  */





footer
{background-color:#022f56;
background-image: url("pic/wellen-blau.png");
position: relative; 
width: 100%;
min-height:280px;
margin-top:-180px;
z-index:2;
}

h4
{font-weight:bold;
font-style:normal;
color: white;
font-size: 16px;
letter-spacing: 1.2 em;
line-height: 160%;

}

.text-impressum
{width: 750px;
height:auto;
text-align: center;
margin: 30px auto 30px auto;
}





/*  .........................  Slideshow style ...............................  */

html { min-height: 100%; }
 
body { height: 100%; }
 
.slideshow {
  list-style: none;
  z-index: 1;
}
 
.slideshow li span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  opacity: 0;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: imageAnimation 24s linear infinite 0s;
  -moz-animation: imageAnimation 24s linear infinite 0s;
  animation: imageAnimation 24s linear infinite 0s;
}

.no-cssanimations .slideshow li span { opacity: 1; }


/*  .........................  Animation and Opacity ...............................  */


@-webkit-keyframes 
imageAnimation { 
0% { opacity: 0; -webkit-animation-timing-function: ease-in;}
12.5% { opacity: 1;  -webkit-animation-timing-function: ease-out;}
25% { opacity: 1; }
37.5% { opacity: 0;}
100% { opacity: 0;}
}

@-moz-keyframes 
imageAnimation { 0% {
 opacity: 0;
 -moz-animation-timing-function: ease-in;
}
 12.5% {
 opacity: 1;
 -moz-animation-timing-function: ease-out;
}
 25% {
 opacity: 1;
}
 37.5% {
 opacity: 0;
}
 100% {
 opacity: 0;
}
}

@keyframes 
imageAnimation { 0% {
 opacity: 0;
 -webkit-animation-timing-function: ease-in;
 -moz-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
}
 12.5% {
 opacity: 1;
 -webkit-animation-timing-function: ease-out;
 -moz-animation-timing-function: ease-out;
 animation-timing-function: ease-out;
}
 25% {
 opacity: 1;
}
 37.5% {
 opacity: 0;
}
 100% {
 opacity: 0;
}
}

@-webkit-keyframes 
titleAnimation { 0% {
 opacity: 0;
}
 12.5% {
 opacity: 1;
}
 25% {
 opacity: 1;
}
 37.5% {
 opacity: 0;
}
 100% {
 opacity: 0;
}
}

@-moz-keyframes 
titleAnimation { 0% {
 opacity: 0;
}
 12.5% {
 opacity: 1;
}
 25% {
 opacity: 1;
}
 37.5% {
 opacity: 0;
}
 100% {
 opacity: 0;
}
}

@keyframes 
titleAnimation { 0% {
 opacity: 0;
}
 12.5% {
 opacity: 1;
}
 25% {
 opacity: 1;
}
 37.5% {
 opacity: 0;
}
 100% {
 opacity: 0;
}
}

/*  .........................  bg-images to slideshow  ...............................  */




.slideshow li:nth-child(1) span { 
background-image: url(1a.jpg); }

.slideshow li:nth-child(2) span {
  background-image: url(2a.jpg);
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  animation-delay: 6s;
}

.slideshow li:nth-child(3) span {
  background-image: url(3a.jpg);
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  animation-delay: 12s;
}

.slideshow li:nth-child(4) span {
  background-image: url(4a.jpg);
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  animation-delay: 18s;
}