/* Schriftarten */
@font-face {
    font-family: 'maitre-normal';
    src: url('./fonts/maitree-latin-500-normal.woff2') format('woff2'),
         url('./fonts/maitree-latin-500-normal.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'le-jour-serif';
    src: url('./fonts/Le\ Jour\ Serif.woff2') format('woff2'),
         url('./fonts/Le\ Jour\ Serif.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'le-jour-script';
    src: url('./fonts/Le\ Jour\ Script.woff2') format('woff2'),
         url('./fonts/Le\ Jour\ Script.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'temps-normal';
    src: url('./fonts/temps-normal.woff2') format('woff2'),
         url('./fonts/temps-normal.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'handwriting';
	src: url('./fonts/Handwriting.woff2') format('woff2'),
		 url('./fonts/Handwriting.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	}

@font-face {
    font-family: 'temps-bold';
    src: url('./fonts/temps-bold.woff2') format('woff2'),
         url('./fonts/temps-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Style für für Desktops */
/*@media screen and (min-width: 960px){*/
*{
    margin: 0;
    padding: 0;
 	/* color:#F5DCB5; */
    font-family: temps-normal;
    font-weight: 400;
}

html{
	height: 100%;
	font-family: Arial, Verdana, Helvetica, Lucida, sans-serif;
	background-color: #F4ECE1;
	position:relative;
	margin: 0;
    padding: 0;
    color: #1E1E1E;
    font-family: sans-serif;
    letter-spacing: 1px;
    font-weight: 300;
}

body{
	height: 100vh;
	display: flex;
	flex-flow: column nowrap;
	
	margin:0;
	padding:0;
	overflow: auto;
    overflow-x: hidden;
}

header{
	/* border: solid gray 10px; */
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	position: fixed;
	z-index: 100;
	width: 100vw;
	margin: 0;
	text-align: center;
	font-size: x-large;
}

main{
	/* border: solid blue 2px; */
	display: flex;
	flex-wrap: nowrap;
	/* flex-direction: column;
	flex-flow: row wrap; */

	justify-content: center;

	margin: 149px 0px 0px 0px;
	background-repeat: no-repeat;
	background-position: center top;
	text-align: center;
	color: #1e1e1e;
}
main img{
	width: 580px;
} 
.hauptinhalt{
	/* border: solid #000000 2px; */
	max-width: 940px;
	width: 100vw;
	display:flex;
	flex-flow: column nowrap;
	justify-content: center;
	text-align: center;
}
.hauptinhalt p{
	padding-right: 10%;
	padding-left: 10%;
}

.geschenk{
	border: solid 21px #FFE167;
	text-align: center;
	margin:14%;
	padding: 30px;

}

footer{
	/* border: solid gainsboro; */
	/* text-align: left; */
	color:#F5DCB5 inherit;
    background-color: #1E1E1E;
	font-size: 1.1em;
	padding: 25px 5px 5px 5px;
	/* word-break: break-all; */
}
.footer-flex{
	display:inline-block;
	/* border:solid 5px green; */
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	/* height: 4cqh; */


}
.footer-bild{
	/* border:solid 2px snow; */
	/* display: block; */
	width: 64px;
	height: 64px;
	/* margin-left: auto;
	margin-right: auto; */
}
.footer-menu{
	/* border: solid 2px lightgreen; */
	text-align: center;
	text-transform: uppercase;
	padding: 0 11px 0 11px;
	height: 80px;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
}

.footer-links{
	border: solid 4px #E5C10C;
	border-radius:3px;
	
	padding: 5px;
	height: 100px;

    /* flex-basis: 100%; */
    list-style: none; 
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-evenly;
	align-items:center;
}

.footer-links li{
	    position: relative; 
}

footer  a{
	text-decoration: none;
	color:#F5DCB5
}

body a:hover{
	color: #E5C10C;
}

footer  p{
	padding: 25px 0 10px 0;
}

table.kontakt{
	/* border: solid 2px darkred; */
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	color:#F5DCB5;
	border-collapse: separate;
}

table.kontakt td{
	/* background-color: yellow; */
	padding: 5px;

}

.pdfembed{
	/* border: solid green 2px; */
	display: flex;
	flex-direction: column;
	height:100dvh;
	/* margin-top: 20px; */

}

p{
	padding-top: 3px;
	padding-bottom: 6px;
}

b{
	padding-bottom: 6px;
}

h1{
    font-family: 'temps-bold';
	margin: 30px 8px 20px 8px;
	font-size:x-large;
	font-weight: 600;
	letter-spacing: 3px;
}

h2{
	margin: 15px 8px 15px 8px; 
}


h3{
	margin: 15px 8px 10px 8px; 
}

/*SLIDESHOW*/
/***************************************/
.mySlides {
	display: none;
	}

.mySlides img {
	vertical-align: middle;
	width:620px;
	max-width:fit-content;
}

/* Slideshow container */
.slideshow-container {
	/* border:solid yellow 2px; */
	display:inline-block;
	height:min-content;
}

/* dots representing images */
.dot {
  height: 9px;
  width: 9px;
  margin: 0 2px;
  background-color: #F5DCB5;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.activeslide {
  background-color: #E5C10C;
}

/* fading animation with keyframes */

.slideshow-container .fade-slide {
  	animation: fadeInOut 8s ease forwards;

}

@keyframes fadeInOut {
  	0% {
    	opacity: 0.05;
  	}
	15% {
    	opacity: 1;
  	}
	85% {
    	opacity: 1;
  	}

	100%{
		opacity: 0.05;
	}

}

/***************************************/

.slogan{
	display:inline-block;
	background-color: none;
	width: fit-content;
	padding-left: 5px;
	padding-right: 10px;
	padding-top: -5px;
	padding-bottom: -5px;
}

.insert-artisans{
	font-family: le-jour-serif;
	font-size:x-large;
	font-weight:600;
	color: #1e1e1e;
	/* text-shadow: 1px 1px #FFE167; */
	text-shadow: 1px 1px #F5DCB5;
}

.insert-ofgoodtaste{
	font-family: handwriting;
	font-size:x-large;
	font-weight:600;
	color: #1e1e1e;
	text-shadow: 1px 1px #F5DCB5;
}

/*fade in slogan*/
.reveal {
    position: relative;
    opacity: 0;
	animation: bluppiweg 1s ease;
}
  
.reveal.active {
    opacity: 1;
 }


.active.boxease {
	animation: bluppi 2.5s ease;
}

@keyframes bluppi {
    0% {
      transform: translateX(-150px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
}

@keyframes bluppiweg {
    0% {
      transform: translateX(0);
      opacity: 1;
    }
    100% {
      transform: translateX(100px);
      opacity: 0;
    }
}

/******************************************/

p{
	padding: 35px 0 25px 0;
}
footer p{
	padding: 25px 0 10px 0;
}

/******************* Transition *****************/

section {
	/* border: solid #ffffff 2px; */
    /* min-height: 60vh; */
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}

section .container {
    margin: 0px;

}

.reveal.active {
    opacity: 1;
 }

/** Festes Hintergrundbild im Fenster ******************************/
.parallax1 {
	/* border: solid rgb(128, 0, 255) 3px;  */
	/* background-image: url("../pics/hintergrund.png"); */
	background-color: aliceblue;
	/* padding-top:100px; */
  
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.parallax2 {
	/* border: solid rgb(128, 0, 255) 3px; */
	/* background-image: url("../pics/kunstwerk-f.png"); */
	/* padding-top:100px; */

	text-align: center;
	text-shadow:2px 1px #F5DCB5;
  
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/*******************************************************/
/*Image Settings*/

.image-container{
		/* border:solid yellow 2px; */
	display:inline-block;
	height:min-content;
}


/*******************************************************/
/*******************************************************/
/*Stying for small screens*/
@media only screen and (max-width: 940px){
	*{
		/* border: solid yellow 2px; */
		margin: 0;
		padding: 0;

		font-family: temps-normal;
		/* letter-spacing: 1px;
		font-weight: 300; */
	}
	
	html{
		/* border: solid darkcyan 2px; */
		height: 100%;
		position:relative;
		margin: 0;
		padding: 0;
		font-family: sans-serif;
		letter-spacing: 1px;
		font-weight: 300;
	}
	
	body{
		/* border: solid darkblue 2px; */
		margin:0;
		padding:0;
		height: 100%;

	}

	main{
		/* border: solid skyblue 2px; */
		/* flex: 1; */
		margin: 79px 0px 0px 0px;
		padding: 0 0 0 0;
		/* background-size: 100% auto; */
		text-align: center;
	}

	main img{
		width:95vw;
	}

	.hauptinhalt{
		/* border: solid #000000 2px; */
		margin: auto;
		max-width: auto;
		height:auto;
		text-align: center;
	}

	.hauptinhalt p{
		padding-right: 5%;
		padding-left: 5%;
	}	

	section h1 {
		font-size: 1.5rem;
		text-align: center;
	}

	.mySlides{
		/* border:solid maroon 2px; */
		object-fit: contain;

	}

	.mySlides img {
		vertical-align: middle;
		width: 95vw;
	}

	.dotHolder{
		text-align:center
	}
}