/* Hier werden erstmal alle Ränder pauschal auf 0 gesetzt, ebenso die Zeilenabstände,
damit geht man sicher, dass die einzelnen Browser die Seite wirklich gleich anzeigen.*/

* {
		margin: 0;
		padding: 0;
		line-height: 1.5em; /* "em" ist sozusagen die Schriftgröße, d.h. in diesem Fall beträgt die
		Zeilenhöhe das 1,5-fache der Schriftgröße.*/
}

/* Das ist sozusagen der "Körper", in dem sich alles befindet; hier wird das Hintergrundbild
festgelegt und die Schriftart.*/

body {
		font-family: "Calibri", "Arial", sans-serif;
		background-repeat: repeat;
		background-attachment: scroll;
		background-image: url("bilder/bg.jpg");
		padding-bottom: 1em; 
}

ul {

list-style-type: none; /* ul ist der Beginn einer Liste, li sind die Listenunterpunkte;
der Ausdruck bedeutet, dass vor den einzelnen Listenpunkten kein Spiegelstrich oder Bullet oder sowas steht. */

}

ul:link,
ul:visited,
ul:hover,
ul:focus,
ul:active {outline: none;}

ul li:link,
ul li:visited,
ul li:hover,
ul li:focus,
ul li:active {outline: none;}

a:link,
a:visited,
a:hover,
a:focus,
a:active {outline: none;}

/* Den Container hab ich selbst definiert, das ist das, wo die Inhalte drin sind. "#" spricht 
eine individuell vergebene ID an, d.h. die ID gehört zu einem ganz speziellen Kästchen, das
so angesprochen wird und eben "container" heißt. */

#container {
			
		max-width: 1200px; /* Maximalbreite */
		min-width: 300px; /* Minimalbreite*/
		min-height: 400px; /* Minimalhöhe */
		padding: 8% 5% 5% 90px; /* Ränder nach innen */
		
		
}



#logo {
		width: 55%; /* Prozent werden immer mit dem Kästchen verrechnet, in dem sich das Kästchen befindet */
		min-width: 400px;
}

#logobox {

		width: 100%;
}


.logo_u {
		width: 45%; /* Prozent werden immer mit dem Kästchen verrechnet, in dem sich das Kästchen befindet */
		min-width: 400px;
		margin: 0 0 10% 0;
}



/* Ketten ________________________ */

#menu_header_k {

	background: url("bilder/buttons/ketten_header.png") no-repeat;
	background-size: 100%;
	height: 3em;
	width: 45%;
	margin: 2em 0 0 0;
	display: block;

}

#menu_header_k:visited,
#menu_header_k:hover,
#menu_header_k:focus
{
		background: url("bilder/buttons/ketten_header.png") no-repeat;
		background-size: 100%;
		height: 3em;
		width: 45%;
		margin: 2em 0 0 0;
		display: block;
		text-decoration: none;
		outline: none;
}

#menu_header_k:active {

		background: url("bilder/buttons/ketten_header_active.png") no-repeat;
		background-size: 100%;
		height: 3em;
		width: 45%;
		margin: 2em 0 0 0;
		display: block;
		text-decoration: none;
		outline: none;
}


/* Armbänder _____________________________*/

#menu_header_a {

	background: url("bilder/buttons/arm_header.png") no-repeat;
	background-size: 100%;
	height: 3em;
	width: 45%;
	margin: 2em 0 0 0;
	display: block;

}

#menu_header_a:visited,
#menu_header_a:hover,
#menu_header_a:focus
{
		background: url("bilder/buttons/arm_header.png") no-repeat;
		background-size: 100%;
		height: 3em;
		width: 45%;
		margin: 2em 0 0 0;
		display: block;
		text-decoration: none;
		outline: none;
}

#menu_header_a:active {

		background: url("bilder/buttons/arm_header_active.png") no-repeat;
		background-size: 100%;
		height: 3em;
		width: 45%;
		margin: 2em 0 0 0;
		display: block;
		text-decoration: none;
		outline: none;
}

/* Ohrschmuck _________________________*/

#menu_header_o {

	background: url("bilder/buttons/ohr_header.png") no-repeat;
	background-size: 100%;
	height: 3em;
	width: 45%;
	margin: 2em 0 0 0;
	display: block;

}

#menu_header_o:visited,
#menu_header_o:hover,
#menu_header_o:focus
{
		background: url("bilder/buttons/ohr_header.png") no-repeat;
		background-size: 100%;
		height: 3em;
		width: 45%;
		margin: 2em 0 0 0;
		display: block;
		text-decoration: none;
		outline: none;
}

#menu_header_o:active {

		background: url("bilder/buttons/ohr_header_active.png") no-repeat;
		background-size: 100%;
		height: 3em;
		width: 45%;
		margin: 2em 0 0 0;
		display: block;
		text-decoration: none;
		outline: none;
}

/* Individuelles ________________________*/

#menu_header_sp {

	background: url("bilder/buttons/special_header.png") no-repeat;
	background-size: 100%;
	height: 3em;
	width: 45%;
	margin: 2em 0 0 0;
	display: block;

}

#menu_header_sp:visited,
#menu_header_sp:hover,
#menu_header_sp:focus
{
		background: url("bilder/buttons/special_header.png") no-repeat;
		background-size: 100%;
		height: 3em;
		width: 45%;
		margin: 2em 0 0 0;
		display: block;
		text-decoration: none;
		outline: none;
}

#menu_header_sp:active {

		background: url("bilder/buttons/special_header_active.png") no-repeat;
		background-size: 100%;
		height: 3em;
		width: 45%;
		margin: 2em 0 0 0;
		display: block;
		text-decoration: none;
		outline: none;
}

.menubox {

		width: 350px;
		height: 310px;
		opacity: 1;
		float: left;
		margin: 1em 3em 7em 0;
		display: inline;
}

.infobox {
		width: 90%;
		height: auto;
		min-width: 350px;
		line-height: 1.5em;
		padding: 3em 3em 2em 0;
		float: left;
}


ul.k {
  	width: 350px;
  	float:left;
}

li.m_ketten {

	position: absolute;
	width: 350px;
  
}

li.m_ketten img {

	width: 350px;
	transform: rotate(-4deg);
	margin: 1em 0 0 0;

}

li.m_ketten:nth-child(4) {
  animation: xfade 40s 0s infinite;
}

li.m_ketten:nth-child(3) {
  animation: xfade 40s 10s infinite;
}

li.m_ketten:nth-child(2) {
  animation: xfade 40s 20s infinite;
}

li.m_ketten:nth-child(1) {
  animation: xfade 40s 30s infinite;
}


ul.a {
 width: 350px;
 float: left;
}

li.m_arm {
 position: absolute;
 width: 350px;
  
}

li.m_arm img {

	width: 100%;
	transform: rotate(2deg);
	margin: 1em 0 0 0;

}

li.m_arm:nth-child(4) {
  animation: xfade 52s 0s infinite;
}

li.m_arm:nth-child(3) {
  animation: xfade 52s 13s infinite;
}

li.m_arm:nth-child(2) {
  animation: xfade 52s 26s infinite;
}

li.m_arm:nth-child(1) {
  animation: xfade 52s 39s infinite;
}



ul.o {
 	width: 350px;
	float: left;
}

li.m_ohr {
 position: absolute;
 width: 350px;
  
}

li.m_ohr img {

	width: 100%;
	transform: rotate(-2deg);
	margin: 1.5em 0 0 0;

}

li.m_ohr:nth-child(4) {
  animation: xfade 32s 0s infinite;
}

li.m_ohr:nth-child(3) {
  animation: xfade 32s 8s infinite;
}

li.m_ohr:nth-child(2) {
  animation: xfade 32s 16s infinite;
}

li.m_ohr:nth-child(1) {
  animation: xfade 32s 24s infinite;
}



ul.s {
 	width: 350px;
	float: left;
}

li.m_sp {
 position: absolute;
 width: 350px;
  
}

li.m_sp img {

	width: 100%;
	transform: rotate(3.5deg);
	margin: 0.75em 0 0 0;

}

li.m_sp:nth-child(4) {
  animation: xfade 44s 0s infinite;
}

li.m_sp:nth-child(3) {
  animation: xfade 44s 11s infinite;
}

li.m_sp:nth-child(2) {
  animation: xfade 44s 22s infinite;
}

li.m_sp:nth-child(1) {
  animation: xfade 44s 33s infinite;
}




@keyframes xfade{
  5% {
  	opacity:1;
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  50% {
    opacity:0;
  }
  75% {
    opacity:0;
  }  
  92% {
    opacity:0;
  }
}



.gallerybox {
		float: left;
		margin: 0.5em 0.5em 0.5em 0;
		width: 350px;
		height: 310px;
		
}

.cssbox {

		position: absolute;
}

.footer {
		
		display: flex;
    	justify-content: center; 
    	align-items: center;
    	padding: 7% 0 0 0;
		
}

.footer_pic {

		background: url('bilder/buttons/footer.png') no-repeat;
		background-size: 100%;
		height: 2em;
		width: 180px;
		display: block;
		
}

.footer_pic:visited,
.footer_pic:hover,
.footer_pic:focus
{
		background: url("bilder/buttons/footer.png") no-repeat;
		background-size: 100%;
		height: 2em;
		width: 180px;
		display: block;
		text-decoration: none;
}

.footer_pic:active {

		background: url("bilder/buttons/footer_active.png") no-repeat;
		background-size: 100%;
		height: 2em;
		width: 180px;
		display: block;
		text-decoration: none;
}

.back {
		background: url('bilder/buttons/back.png') no-repeat;
		background-size: 100%;
		height: 2em;
		width: 45px;
		position: fixed;
		bottom: 25px;
		left: 10px;		
}

.back:visited,
.back:hover,
.back:focus
{
		background: url("bilder/buttons/back.png") no-repeat;
		background-size: 100%;
		height: 2em;
		width: 45px;
		display: block;
		text-decoration: none;
		outline: none;
}

.back:active {

		background: url("bilder/buttons/back_active.png") no-repeat;
		background-size: 100%;
		height: 2em;
		width: 45px;
		display: block;
		text-decoration: none;
		outline: none;
}




div.clear {
		clear: both;
}

#size {
		width: 350px; 
		height: 263px;
}

.title {
		width: 350px;
		height: auto;
		text-align: center;
		color: #353535;
		font-style: italic;
}