@charset "utf-8";
/* CSS Document */

*{box-sizing: border-box;}

@font-face{src: url("../type/OpenSansCondensed-Light.ttf");
font-family:open;
}

@font-face{src: url("../type/DK Lemon Yellow Sun.otf");
font-family:sun;
}

@font-face{src: url("../type/Everything.ttf");
font-family:every;
}
@font-face{src: url("../fontawesome-free-5.15.3-web/webfonts/fa-solid-900.ttf");
font-family: FontAwesome;}

body {background-color: #f7f7f7;
    font-family: open, sans-serif;
    font-size: 1.125rem;
    margin: 0;
    /*line-height: 1.5;*/
    -webkit-font-smoothing: antialiased;
	overflow-y: scroll;
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

h1 {text-transform: uppercase;}

#link_hell a{color:#121416;
font-weight: bold;
text-decoration: none;
}
#link_hell a:hover{color: #f7bf5b;
text-decoration: overline underline;}

.link_hell a{color:#121416;
font-weight: bold;
text-decoration: none;
}
.link_hell a:hover{color: #f7bf5b;
text-decoration: overline underline;}

.link_dunkel a{color:#f7bf5b;
font-weight: bold;
text-decoration: none;
}
.link_dunkel a:hover{color: #fff;
text-decoration: overline underline;}

/*fontawsome button pfeil*/

#button {
  display: inline-block;
  background-color: #121416;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
  #button {
    margin: 30px;
  }
#button::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}
#button:hover {
  cursor: pointer;
  background-color: #333;
}
#button:active {
  background-color: #555;
}
#button.show {
  opacity: 1;
  visibility: visible;
}

/* ------------------------------- TOP Navigation Formate  ********************** */

.menu-area{ background-color:#121416;
background-repeat: no-repeat;
position: fixed;
left:0;
top:0;
width:100%;
box-shadow: 5px 5px 5px;
z-index: 2;
}

/*.menu-area a{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #121416;
  height: 60px;
}*/

.menu-area ul{
list-style: none;
display: flex;
justify-content: center;
max-width: 62.5rem;
width: 80%;/*65%*/
margin: auto;
text-transform: uppercase;
	
}
.menu-area li{
  position: relative;
  width: 100%;
  text-align: center;
	padding: 0.625rem 0;
	
}
/*ab hier eingefügt*/
.menu-area li a{/* background-color:rgba(248,58,170,0.63); */
white-space: nowrap;
color:#fff;
text-align: center;
position: relative;
display: block;
margin: 0 10px 0 0 ;
padding: 1.25rem ;
text-transform: uppercase;
overflow: hidden;
text-decoration: none;
outline: none;
background-color: rgba(18,20,22,0.6);	
z-index: 1;
}

.menu-area a:before {
  box-sizing: border-box;
  transform: translateX(100%);
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  border-bottom: 1px solid transparent;
  border-left: 1px solid transparent;


}
.menu-area a:after {
  box-sizing: border-box;
  transform: translateX(-100%);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 99.5%;
  height: 1px;
  border-top: 1px solid transparent;
  border-right: 1px solid transparent;
	

}

.menu-area li a:hover{color:#8e8e8e;
text-decoration: none;}

.menu-area a:hover:before {
  transition: 0.1s transform linear, 0.1s height linear 0.1s;
  transform: translateX(0);
  height: 100%;
  border-color: #fff;
}
.menu-area a:hover:after {
transition: 0.1s transform linear 0.2s, 0.1s height linear 0.3s;
transform: translateX(0);
height: 100%;
border-color: #fff;}

/*bis hier*/


.menu-area li:hover .dropdown-1 > li{
 display: block;
 top: 0;
	width: 200px;/**/
	padding:0;

}

.dropdown-1 li{
  display: none;
  position: relative;
}
.dropdown-1{
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
	right: 50%;
}
.dropdown-1 li:hover{
  display: block;
	

}


/* - NAVIGATION ENDE - */
		
/* --------------------------------------- INHALTE ---------------------------------*/

/*Startseite*/
.wraparound{/*background-color: rgba(79,15,197,0.68);*/
display: table;
width: 100%;
margin: auto;
padding-top: 200px;/*umrechnen*/
	
}
.wraparound_cell1{/*background-color: rgba(203,203,203,0.81);*/
display: table-cell;
width: 20%;}

.wraparound_cell2{/*background-color: rgba(216,44,47,0.73);*/
display: table-cell;
width: 60%;}
.wraparound_cell3{display: table-cell;
width: 20%;}



.oben_home{/*background-color: rgba(24,34,215,0.77);*/
width: 100%;
height: 17.0625rem;/*273px umrechnen*/
text-align: center;
padding-top: 2.5rem;/*40px umrechnen*/}

.mitte_home{/*background-color: rgba(221,215,38,0.80);*/
width: 100%;
line-height: 1.875rem;/*30px*/
color: #fff;
text-transform: uppercase;
text-align: center;}

.unten_home{/*background-color: rgba(13,159,116,0.75);*/
	/*padding: 1.25rem 1.25rem 0 1.25rem;*/
text-align: center;}

.unten_home ul{/*background-color: rgba(192,44,46,0.71);*/
width: 60%;
display: flex;
justify-content: space-between;
list-style: none;
padding: 1.875rem 0;
margin: 0 auto;}

		
/*About*/
.container_about{/*background-color: #f7f7f7;*/
max-width: 1000px;
margin: auto;}

	.flexbox_about{/*background-color: rgba(161,199,20,0.84);*/
		/*max-width: 1000px;*/
		display: flex;
justify-content: center;}
	
.flex_item_a{/*background-color: rgba(93,165,240,0.64);*/
width: 50%;
height: 60vh;
	padding: 2.25rem;
text-align: center;
margin: auto;
border-right: 1px solid;}

	
.flex_item_a3{/*background-color: rgba(216,27,30,0.74);*/
	width: 50%;
padding: 2.25rem;}/*160px*/

/*About Ende */


.m_klein_unten{float: right;
margin-left: 10px;}
	

	
/*Gemälde Gallery*/
	
.gallery_container{display: flex;
flex-wrap: wrap;
justify-content: center;
}


/*Gallery Mouseover Animation*/


.gallery_img{padding: 10px;
transition: 0.3s ease-in-out;
position: relative;
}

.gallery_img:hover{
opacity: .5;
}


.flex_item, .stele_img,.stele_img1, .glightbox3, .glightbox4{
transition: 0.3s ease-in-out;
position: relative;
}

.gallery_img:hover, .flex_item:hover, .stele_img:hover,.stele_img1:hover, .glightbox3:hover, .glightbox4:hover{
opacity: .5;
}


#paint{text-transform: uppercase;}	

	
/*Keramik Stele*/
.container_stele{background-color: #0e0d0f;
max-width: 1000px;
margin: auto;}

.header{padding: 1rem 1rem 0 0; 
/*background-color: rgba(232,79,198,0.46);*/
color: #fff;
	}
.header a{color: #fff;
text-transform: uppercase;
text-decoration: none;}
	
.header a:hover{color: #f7bf5b;}
	
.header a:active{color: #f7bf5b;
font-weight: bolder;}
	
.headline{font-family: every, sans-serif;
font-size: 4rem;}
	
.navi{padding-top: 4rem;
color: #f7bf5b;
text-transform: uppercase;}
	
.flexbox, .header{display: flex;
justify-content: space-between;}
	
.flex_item, .media650{/*background-color: rgba(93,165,240,0.64);*/
width: 20%;
height: 60vh;}


	
.flex_item2{/*background-color: rgba(24,234,237,0.69);*/
width: 60%;
height: 707px;/*11.312rem*/
padding: 0 6rem ;}
	
.media650{text-align: right;}
	
.innen_oben{color: #fff;}
	
.innen_oben h3{color: #f7bf5b;}
	
.hightlight{color: #f7bf5b;
font-weight: bold;}
	
.innen_unten{/*background-color: rgba(233,194,29,0.82);*/
display: flex;
flex-wrap: wrap;
justify-content:space-evenly;
min-height:21.875rem;}

	
.stele_img .stele_img1{padding: 1rem;}

/*Keramik Zuckerdosen*/

.container_zucker{background-color: #f7f7f7;
max-width: 1000px;
margin: auto;}
	
.header_zucker{padding: 1rem 1rem 0 0; 
/*background-color: rgba(232,79,198,0.46);*/
color: #000;}
	
.header_zucker a{color: #000;
text-transform: uppercase;
text-decoration: none;}
	
.header_zucker a:hover{color: #f7bf5b;}
	
.header_zucker a:active{color: #f7bf5b;
font-weight: bolder;}
	
.headline_zucker{font-family: every, sans-serif;
font-size: 4rem;}
	
.navi_zucker{padding-top: 4rem;
color: #f7bf5b;
text-transform: uppercase;
/*font-weight: bold;*/}
	
.flexbox_zucker, .header_zucker{display: flex;
justify-content: space-between;}
	
.flex_item_z, .media650{/*background-color: rgba(93,165,240,0.64);*/
width: 300px;
/*height: 60vh;*/}
	

	
.flex_item_z2{/*background-color: rgba(24,234,237,0.69);*/
width: auto;
height: 707px;/*11.312rem*/
padding: 0 6rem;}
	
.flex_item_z3{width: 10rem;} /*background-color: rgba(117,21,199,0.79);}160px*/
	
.media650{text-align: right;}
	
.innen_z{color: #000;}
	
.innen_z .flex_item_z2 h3{color: #f7bf5b;}

.uhz{color: #f7bf5b;
text-align: left;}

.dekoh{color: #f7bf5b;
text-align: left;}
	
	/*Keramik Dekoration*/
	
	.container_deko{background-color:#0e0d0f;
	max-width: 1000px;
	margin: auto;}
	
	.header_deko{padding: 1rem 1rem 0 0; 
		/*background-color: rgba(232,79,198,0.46);*/
		color: #fff;
	}
	.header_deko a{color: #fff;
	text-transform: uppercase;
	text-decoration: none;}
	
	.header_deko a:hover{color: #f7bf5b;
	}
	
	.header_deko a:active{color: #f7bf5b;
		font-weight: bolder;
	}
	
	.headline_deko{font-family: every, sans-serif;
	font-size: 4rem;}
	
	.navi_deko{padding-top: 4rem;}
	
	.flexbox_deko, .header_deko{display: flex;
	justify-content: space-between;}
	
	.flex_item_d, .media650{/*background-color: rgba(220,36,39,0.79);*/
	width: 300px;
	height: 60vh;}
	
	.flex_item_d2{/*background-color: rgba(24,234,237,0.69);*/
	width: auto;
	height: 707px;/*11.312rem*/
	padding: 0 6rem ;
	color: #fff;
	line-height: 2.5rem;
	}
	
	.flex_item_d2 h3{color: #f7bf5b;}
	.flex_item_d3{width: 160px;}
	
	.media650{text-align: right;}
	
	.innen_d{color: #fff;}
	
	.innen_d h3{color: #f7bf5b;}
	
	/*	KONTAKT */
	
	.wrapper_kontakt{/*background-color: rgba(215,40,43,0.82);*/
	display: flex;}
	
	form { max-width:420px; margin:50px auto; }

.feedback-input {
  color:white;
  font-family: open, sans-serif;
	text-transform: uppercase;
  font-weight:500;
  font-size: 18px;
  border-radius: 2px;
  line-height: 22px;
  background-color: transparent;
  border:2px solid #8e8e8e;
  transition: all 0.3s;
  padding: 13px;
  margin-bottom: 15px;
  width:100%;
  box-sizing: border-box;
  outline:0;
}

.feedback-input:focus { border:2px solid #f7bf5b; }

textarea {
  height: 150px;
  line-height: 150%;
  resize:vertical;
}

[type="submit"] {
  font-family: open, sans-serif;
	text-transform: uppercase;
  width: 100%;
  background:#3e3e3e;
  border-radius:5px;
  border:0;
  cursor:pointer;
  color:#8e8e8e;
  font-size:24px;
  padding-top:10px;
  padding-bottom:10px;
  transition: all 0.3s;
  margin-top:-4px;
  font-weight:700;
}
[type="submit"]:hover { background:#1e1e1e; }


/*footer*/

.footer ul{
list-style: none;
display: flex;
justify-content: center;
max-width: 62.5rem;
width: 80%;/*65%*/
margin: auto;
/*text-transform: uppercase;*/}

.footer li{width: 100%;
padding: 1rem;}

.foo1{text-align: center;}
.foo1 a, .foo2 a{text-decoration: none;
color: #121416;}
.foo1 a:hover, .foo2 a:hover{color: #f7bf5b;}


.foo2{text-align: right;}

/*Impressum*/

	
.table_cell_about3 {display: table-cell; width: 50%; 
padding: 6rem;
vertical-align: middle;}

	
/*@media*/

@media(max-width:550px){
.menu-area ul{flex-direction: column;}

.menu-area li{/*background-color:rgba(53,233,51,0.20);*/
display:block;
width: 100%;
padding: 0;}
	
.menu-area li a{padding: 0; margin: 0;}
.menu-area li:hover .dropdown-1 > li{
display: none;}	

.dropdown-1, .dropdown-1 li{display: none;}
	
#startseite{display: block;}
	.oben_home img{width: 95%;}
	.unten_home ul{justify-content: space-around;}
	.unten_home li{width: 110px;}
	
.wrapper_kontakt{flex-direction: column; justify-content: center;}
}

@media screen and (max-width: 780px) {
    .demo-carousel .demo-carousel-item {
        width: 50%;
    }
}
@media screen and (max-width: 400px) {
    .demo-carousel .demo-carousel-item {
        width: 100%;
    }
}


/* Mobile */
@media screen and (max-width: 500px) {
    .demo-gap,
    .demo-content {
        padding: 50px 30px;
    }

}

	
/*@media Stele und Zuckerdosen*/
@media (max-width:550px){
		.flexbox_zucker, .flexbox_about, .flexbox{flex-direction: column;}/*flex-wrap: wrap*/
	
	
	}
	
@media (max-width:650px){
	.innen_unten{display: none;}
	.headline, .headline_zucker, .headline_deko{display: none;}
	.header, .header_zucker, .header_deko{padding: 0 0 2rem 0; justify-content: center;}
	.navi, .navi_zucker, .navi_deko{padding-top: 1rem;}
		.flex_item, .flex_item_d{width:100%; height: auto; text-align: center;}/*Bild mittig?*/
		.media650{display: none;}
		.stele_img{display: none;}
		.stele_img1{display: none;}
		.flex_item2, .flex_item_d2{width: 100%; height: auto; padding: 0;}
	.innen_oben{padding-left: 2.5rem;}
	.m_klein_unten{display: none;}
	.flex_item_z2{width: 100%; padding: 0; height: auto;}
		
	.flex_item_z3{width: 100%; text-align: center;}
	.flexbox_deko{flex-wrap: wrap;}
	.flex_item_d3{ justify-content: space-around; width: 100%; text-align: center;}
	.flex_item_a{border-right: 0px; width: 100%;margin-top:12rem; height: 75%; padding:1rem; text-align: left;}
	.flex_item_a3{width: 100%; padding: 0;}
	.jara_gap_imp{margin-top:2rem;}
	.table_cell_about3{width: 100%; padding: 6.125rem 1rem;}
	.footer ul{width: 100%;}
	}
	
@media (max-width:900px){
		.stele_img1{display: none;}
	}