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

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



body
{font-family: verdana, tahoma, sans-serif;
font-size:12px;
line-height:160%;
background-image: url("pic/wellen-ocker.png");
background-position: 0px 1200px;
background-repeat: no-repeat;
}



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
{width:100%; 
height:auto;
margin: 50px;
text-align: center;
z-index:2;
}

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;
}



/*  .........................  kaiserbaeder  ...............................  */

.wrapper
{width: 800px;
height: auto;
margin: 50px auto 50px auto;
z-index:2;
}

.kaiserbaeder
{padding: 150px auto 50px auto;
} 

.baeder-bild
{
font-family:"Times New Roman", Times, serif;
font-weight:bold;
font-size: 30px;
font-style:italic;
letter-spacing:1px;
}

.baeder-bild2
{font-family:Tahoma, Geneva, sans-serif;
font-weight:100;
text-transform: uppercase;
font-size: 20px;
letter-spacing:20px;
}

.baeder-bild img
{
border: 9px solid #022f56;
}

.baeder-bild2 img
{
border: 15px solid #fff;
}

.baeder-text
{margin: 50px auto 50px auto;
text-align: justify;
width: 500px;
height: auto;
}
.baeder-text p
{margin: 20px auto 20px auto;

}

.under
{font-family:Arial, Helvetica, sans-serif;
font-weight:100;
font-size:11px;
font-style:normal;
letter-spacing:0px;
line-height:50%;

}

.topping
{font-size:16px;
font-weight:100;
text-align: left;
letter-spacing:3px;
text-transform: uppercase;
color:#7f7414;
line-height:170%;
}

.welle
{z-index:5;
}

/*  .................  Baederarchitektur Beispiele  ..................  */


.eins
{float: left;
width: 150px;
height: 150px;
margin:0px 15px 0px 0px;

}

.zwei
{float: left;
width: 150px;
height: 150px;
margin: 0px 15px 0px 15px;
padding-left: 25px;
}
 
.drei
{float: left;
width: 150px;
height: 150px;
margin: 0px 0px 0px 15px;
padding-left: 25px;
}
 

/*  .........................  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;
}


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

footer
{background-color:#022f56;
background-image: url("pic/wellen-blau.png");
color:#d2d371;
width: 110%;
line-height:200%;
min-height:350px;
}

.thebest
{padding-top: 50px;
}

.prime
{text-transform: uppercase; 
font-size:14px;
letter-spacing:2px;
}
ul
{list-style-type: none;
text-align:center;

}


/*
.footer2
{background-color: white;
width: 1000px;
min-height:280px;
margin: 0 auto 0 auto;
padding:20px;
}

.footer2 p
{float: left;
width: 150px;
height: 100px;
margin:0px auto 0px auto;
padding: 5px;
}

.big
{width: 180px;
height: 100px;
}

.small
{width: 130px;
height: 100px;
}

.footer3
{background-color:#406d90;
width: 100%;
min-height:780px;
margin: 0 auto 0 auto;
padding:20px;
font-weight: bold;
color: white;
}

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

}
/*