/* ALLGEMEIN */
body {
	background-color: #ffffff;
	font-family: Arial, "Trebuchet MS", Helvetica, sans-serif;
	font-size: 17px;
    font-weight: normal;
	line-height: 25px;
	padding: 0px;
	margin: 0px;
}
html {
	overflow-y: scroll;
}
#aligncontent {
	max-width: 1080px;
	min-width: 600px;
	padding: 25px;
	margin: auto;
}
img {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	border: 0;
}
article {
	padding: 0px;
	margin: 0px;
}
section {
	padding: 0px;
	margin: 0px;
}
h1, h2, h4 {
	padding: 6px 0px 6px 0px;
	margin: 25px 0px 25px 0px;
	font-size: 25px;
	font-weight: bold;
	color: #ffffff;
	text-align: center;
	width: 100%;
	background-image: url(../img/bg_h1.gif);
	background-repeat: repeat;
}
h2 {
	background-image: url(../img/bg_h2.gif);
	background-repeat: repeat;
	margin: 0px;
    position: relative;
    top: 155px;
}
h3 {
	font-size: 22px;
	font-weight: bold;
	color: #000000;
	text-align: justify;
	background-image: none
}
h5 {
    font-family: Tahoma, "Trebuchet MS", sans-serif;
    font-size: 35px;
	font-weight: normal;
	color: #000000;
	text-align: center;
    padding: 60px 0px 40px 170px;
	margin: 0px;
    position: relative;
    top: 130px;
    text-transform: uppercase;
    word-spacing: 20px;
    letter-spacing: 4px;
    background-color: none; /* For browsers that do not support gradients */
    background-image: linear-gradient(145deg, rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,0)), url(../img/greynoise.png);

}
h6, p.promt_select {
	font-size: 20px;
	font-weight: bold;
	color: #000000;
	padding: 0px;
	margin: 0px;
}
p, figcaption {
	width: 100%;
	text-align: justify;
	padding: 0px 0px 10px 0px;
	margin: 0px;
    font-weight: 400;
    letter-spacing: 0.5px;
}
p {
	padding-bottom: 25px;
    line-height: 1.5;
    letter-spacing: 0.3px;
}
q {
  display: inline;
  font-family: 'Times New Roman', serif;
  color: #663300;
  font-size: 110%;
}
q:before {
  content: open-quote;
}
q:after {
  content: close-quote;
}
/* HEADER: */
header {
	height: 231px;
	width: 100%;
	background-image: url(../img/header_korb.png);
	background-repeat: repeat;
	background-color: #b3b360;
	padding: 0px;
	margin: 0px;
}
/* sich überlagerndes Background Design mit optionalem zweiten background-image: */
#bg2 {
    height: 200px;
	width: 100%;
	/*background-image: url(../img/header_kanne.png);
	background-repeat: no-repeat;
    background-position: center;*/
	background-color: transparent;
	padding: 0px;
	margin: 0px;
}
#logo {
	padding: 24px 0px 0px 85px;
	margin: 0px;
}
/* Bild rechts im header nur bei besonders großen Displays: */
#headpic_right {
	position: absolute;
	top: 0px;
	right: 0px;
}
@media screen and ( max-width: 1700px ) {
    #headpic_right {
	    visibility: hidden;
    }
}
/* SECONDARY NAVIGATION FOR LANGUAGE SELECTION: */
#langnav {
	text-align: right;
	float: right;
	padding: 5px 10px 0px 0px;
	margin: 0px;
	position: absolute; /* #langnav can overlap #logo */
	top: 0px;
	right: 0px;
}
#langnav a {
	color: #ffffff;
	margin: 2px; /* um border bei hover auszugleichen*/
	padding: 4px 6px 3px 30px;
	text-decoration: none;
	border-radius: 8px;
}
#langnav a:hover {
	margin: 0px;
	background-color: #000000;
	color: #ffffff;
	border: 2px solid #ffffff;
}
.en {
	background-image: url(../img/flagge_english.gif);
	background-repeat: no-repeat;
	background-position: 8px center;
}
.jp {
	background-image: url(../img/flagge_nihongo.gif);
	background-repeat: no-repeat;
	background-position: 8px center;
    padding-right: 51px !important;
}
.jp span {
    display: none;
}
.dt {
	background-image: url(../img/flagge_deutsch.gif);
	background-repeat: no-repeat;
	background-position: 8px center
}
/* MAIN NAVIGATION BAR: */
#mobilenav_out {
    z-index:1;
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0px;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: transparent;
    display:none;
}/* #mobilenav_out nötig damit mobile Navigation bei Klick außerhalb geschlossen werden kann.*/
.navresponse {
	position: absolute;
	top: 200px;
	height: 31px;
	width: 100%;
	background-color: #000000;
	padding: 0px;
	margin: 0px;
	display: block;
	overflow: hidden;
	text-align: center;
}
.navresponse a {
	font-family: Arial, Tahoma, Trebuchet MS, Calibri, sans-serif;
	text-decoration: none;
	font-size: 19px;
	color: #ffffff;
	padding: 6px 0px 0px 0px;
	margin: 0px;
}
.navresponse a:hover, #mainnav a.clicked {
	color: #ff4d4d;
}
 #mainnav a.clicked {
	cursor: default;
}
.navresponse .menueicon {
  display: none;
}
.navseparator {
	padding: 8px 15px 0px 15px;
}
#navdeco_l, #navdeco_r {
	padding: 7px 0px 0px 0px;
	float: left;
}
#navdeco_r {
	text-align: right;
	float: right;
}
/* MAIN NAV CHANGES RESPONSIVE TO WINDOW-SIZE: */
@media screen and ( max-width: 1150px ) {
    #bg2 {
	    background-position-x: 371px;
    }
}
/* Zierelemente nur darstellen wenn Fenster mind. 1025px groß: */
@media screen and ( min-width: 1025px ) {
	#navdeco_l, #navdeco_r {
		display: inline;
	}
}
@media screen and ( max-width: 1024px ) {
	#navdeco_l, #navdeco_r {
		display: none;
	}
}

/* Mobile-Menue statt Navi-Leiste darstellen wenn Fenster kleiner gleich 800px: */
@media screen and ( min-width: 801px ) {
    #mobilenav_out {
        display:none !important;
    }
}
@media screen and ( max-width: 800px ) {
	header {
		height: 200px;
	    background-image: url(../img/header_mono.png);
    }
    #logo {
	padding-left: 31px;
    }
    #bg2 {
	    background-image: none;
    }
	.navresponse a:not(:first-child) {
		display: none;
	}
	#mainnav {
		float: right;
		position: absolute;
		right: 0px;
		top: 137px; /* bei top: 107px sind Unterkanten von MenueIcon und Logo auf gleicher Höhe */
		min-height: 55px; /* Höhe des MenueIcons */
		padding: 0px;
		margin: 0px;
		background-color: transparent;
        z-index: 2; /* damit #mainnav über #mobilenav_out liegt */
	}
	#mainnav img:not(:first-child)  {
		display: none;
	}
	.navresponse a.menueicon {
		float: right;
		display: block;
		padding: 0px;
		margin: 0px 25px 0px 0px;
		background-image: url(../img/menueiconbrushbg1.png);
		background-repeat: no-repeat;
	}
	.navresponse a.menueicon:hover {
		background-image: url(../img/menueiconbrushbg2.png);
		background-repeat: no-repeat;
	}
    .navresponse a.menueicon:lang(ja) {
		background-image: url(../img/menueiconbg1.png);
	}
	.navresponse a.menueicon:lang(ja):hover {
		background-image: url(../img/menueiconbg2.png);
	}
	.navresponse.switched {
		position: relative;
		height: auto; /*ohne diese Angabe keine vollständige Darstellung des aufgeklappten mobile menue (entspricht 173px) !*/
		border-bottom-left-radius: 8px;
		border-top-left-radius: 8px;
        /*zuvor:
        width: 190px;
        Neu für mobile device optimiert:*/
        width: 365px;
	} 
	.navresponse.switched .menueicon {
		display: none;
	}
	.navresponse.switched a {
		float: none;
		display: block;
		text-align: right;
		background-color: #000000;
        /* zuvor für PC und Laptop optimiert:
        padding: 4px 25px 4px 0px;
        border-bottom: 2px solid #333333;
        Neu für mobile device optimiert:*/
	    padding: 25px 25px 25px 0px;
        font-size: 38px;
        border-bottom: 4px solid #333333;
	}
	.navresponse.switched a.clicked {
		color: #ffffff;
	}
	.navresponse.switched a:hover {
		background-color: #333333;
		color: #ffffff;
	}
}
/* NEW for Mobile-Menue Start */
@media screen and ( max-width: 750px ) {
    #langnav {
        padding-top: 15px;
    }
    #langnav a {
        font-size: 133%;
        padding-left: 42px; 
        /* background-size: 28px 19px;*/
    }
    .en {
	    background-image: url(../img/flagge2_english.gif);
    }
    /*.jp {
	    background-image: url(../img/flagge2_nihongo.gif);
    }*/
    .dt {
	    background-image: url(../img/flagge2_deutsch.gif);
    }
    .jp img {
        height: 20px;
        width: 60px;
    }
    .jp {
	    background-image: url(../img/flagge2_nihongo.png);
        padding-right: 65px !important;
    }
}
/* NEW for Mobile-Menue End */


/* Footer Impressum */
footer {
	width: 100%;
	padding: 0px;
	margin: 0px;
	background-image: url(../img/bg_footer.gif);
	background-repeat: repeat;
}
footer p {
	color: #ffffff;
	padding: 10px 0px 10px 0px;
	margin: 0px;
	text-align: center;
}
footer a {
	color: #ffffff;
	font-weight: bold;
}


/* HOME */
.board {
	background-image: url(../img/tea_bg.jpg);
    background-color: #6f743a;
	background-repeat: repeat;
	width: 100%;
	padding: 1px 0px 1px 0px; /* bei 0px wird in Firefox margin von boje ignoriert */
	margin: 10px 0px 50px 0px;
}
.boje {
    background-image: url(../img/holzboard.jpg);
	width: 600px;
	height: 210px;
    background-color: #dde0c7;
	background-repeat: repeat;
	background-position: 284px 20px;
	padding: 0px;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
    box-shadow:5px 5px 5px rgb(50, 50, 35);
	border-radius: 4px;
    border: 4px solid #dde0c7;
    line-height: 0px;
}
#boje_paint {
    background-image:url(../../grafik/beton_hell.gif);
    background-position: 128px 50px;
}
@media screen and ( max-width: 850px ) {
	.board {
	background-image: none;
    background-color: #ffffff;
	padding: 0px;
	border-radius: 0px;
    }
    .boje {
	    box-shadow: none;
        border: none;
	    border-radius: 0px;
    }
}
.boje img {
	width: 284px;
	height: 210px;
	float:left;
	padding: 0px;
	margin: 0px;
	border: 0px;
}
.boje p {
	font-family: Comic Sans MS, Arial, Helvetica, sans-serif;
	font-style: italic;
	font-size: 18px;
	color: #000000;
	line-height: 25px;
	text-align: left;
	width: 276px;
	padding: 15px 20px 5px 304px;
	margin: 0px;
}
.boje p:lang(ja) {
	font-family: serif;
	font-style: normal;
	font-weight: bold;
    line-height: 25px;
}

.boje a {
	font-family: Comic Sans MS, Arial, Helvetica, sans-serif;
	font-size: 25px;
	color: #000000;
	 padding: 0px;
}
.boje a:lang(ja) {
	font-family: serif;
	font-size: 25px;
	font-style: normal;
	font-weight: bold;
}
.boje a.link_field {
    padding: 2px 15px;
}
.boje a.link_field:hover {
	color: white;
    background-color: black;
    text-decoration: none;
    border-radius: 0.8em;
    text-shadow: none;
}
.boje a:visited {
	color: #653300;
}
/* Overlay Effekt für Link auf Bild in Boje: */
/* Underlay is needed to position overlay: */
.underlay {
	float:left;
	position: relative;
	width: 50%;
	padding: 0px;
	margin: 0px;
}
/* Pseudoclass overlay::after was needed to make only overlay transparent, but not its children (BG but not text). Changes to previous Version: .overlay { -webkit-transition: 0.3s ease; transition: 0.3s ease; BUT NOT: opacity: 0.1;}.overlay::after {opacity: 0.7;} .underlay:hover .overlay { NOT: opacity: 1;}*/
.overlay {
	float:left;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
	width: 284px;
	height: 210px;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	-webkit-transition: all 0.6s ease; 
	transition: all 0.6s ease;
	padding: 0px;
	margin: 0px;
    opacity: 0.1;
}
.overlay::after {
	content: "";
	background: url(../img/brushstroke.png);
	background-repeat: no-repeat;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: absolute;
	z-index: -1;
}
/* Zoom-in effect: */
.underlay:hover .overlay {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	float:left;
    opacity: 1;
}
.overlaytext {
	font-family: Comic Sans MS, Arial, Helvetica, serif;
	font-style: italic;
	float:left;
	color: #ffffff;
	font-size: 45px;
	line-height: 50px;
	position: absolute;
	top: 43%;
	left: 50%; /* text is positioned in the middle */
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
	padding: 0px;
	margin: 0px;
}
.overlaytext:lang(ja) {
	font-style: normal;
	font-weight: bold;
    top: 50%;
}

.small_text {
    font-size:80%;
}
.explanation {
    background-image: url(../img/pattern_blue.jpg);
	width:420px;
	float: left;
	padding: 0px;
	margin: 0px 20px 3px 0px;
    line-height: 0px;
    padding-bottom: 30px;
}
.explanation figcaption {
    background-image: url(../img/monoblue.png);
  font-size: 90%;
  text-align: left;
  padding: 7px 12px 2px 25px;
  box-sizing: border-box;
  line-height: 22px;
}
.rollenrand {
  background-image: url(../img/pattern_brown.jpg);
  background-color:  #e4d7cf;
  background-repeat: repeat;
  padding: 0px;
  margin: 15px 0px 0px 0px;
  width: 100%;
}
.schriftrolle {
  background-image: url(../img/oldpaper.jpg);
  background-repeat: repeat;
  background-color: #ffdda9;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: serif;
  font-style: normal;
  font-weight: bold;
  line-height:67px;
  font-size:33px;
  letter-spacing: 12px;
  padding: 33px 37px 18px 0px;
  box-shadow: inset 0 0 0.5em 0.25em rgb(250, 190, 135);
  text-align: center;
  margin: 0px auto;
  box-sizing: border-box;
  width: 543px;
}
.schriftrolle img {
  width:187px;
  height:155px;
  opacity: 0.85;
  float: right;
}
.schriftrolle q {
  color: black;
  letter-spacing: 0px;
  line-height: 1;
}
.schriftrolle q::before, .schriftrolle q::after {
  content: none;
}
@media screen and ( max-width: 672px ) {
  .schriftrolle {
    line-height:45px;
    font-size:22px;
    letter-spacing: 8px;
    padding: 22px 25px 12px 0px;
    width:365px
  }
  .schriftrolle img {
    width:125px;
    height:103px;
    opacity: 0.9;
  }
}
@media screen and ( min-width: 835px ) {
    .explanation {
	margin-right: 40px;
    }
  .schriftrolle {
    line-height:90px;
    font-size:44px;
    letter-spacing: 16px;
    padding: 44px 50px 24px 0px;
    width: 730px;
  }
  .schriftrolle img {
    width:250px;
    height:207px;
  }
}


/* GALLERY */
p.promt_select {
	font-size: 18px;
    margin: 43px 0px 15px 0px;
}
#gal_buttons {
	margin: auto;
	margin-top: 25px;
	margin-bottom: 25px;
	padding: 0px;
	text-align: center;
}
#gal_buttons p {
    text-align: center;
}
#gal_buttons button, .mail_button {
	width: 120px;
	margin: 0px 3px 0px 3px;
	padding: 10px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color : #000000;
	font-size: 20px;
	border: 3px solid;
	border-color: #ffffff;
    border-radius: 2px;
}
#gal_buttons button:hover, .mail_button:hover {
	border-color: #7f4c32;
    cursor: pointer;
}
#gal_buttons button.btn.active:hover {
	border-color: #ffffff;
    cursor: default;
}

.item_info {
    margin: 0px 0px 40px 0px;
    line-height: 25px;
    padding: 7px 8px 0px 20px;
}
/* grey BG: */
.chaire .item_info, #all_btn, #chaire_btn {
    background-image: url(../img/monogrey.png);
}
.chaire, #chaire_btn:hover, #chaire_btn.btn.active, #all_btn:hover, #all_btn.btn.active  {
	background-image: url(../img/pattern_grey.jpg);
	background-repeat: repeat;
    background-color: #d8d8d8;
}
#all_btn, #chaire_btn {
	text-shadow: 0px 0px 8px #d8d8d8, 0px 0px 8px #d8d8d8, 0px 0px 8px #d8d8d8, 0px 0px 8px #d8d8d8;
}
.chaire .easyread_bg {
	background-color: #d8d8d8;
}

/* brown BG: */
.pot .item_info, #pot_btn {
	background-image: url(../img/monobrown.png);
}
.pot, #pot_btn:hover, #pot_btn.btn.active {
	background-image: url(../img/pattern_brown.jpg);
	background-repeat: repeat;
    background-color: #e4d7cf;
}
#pot_btn {
	text-shadow: 0px 0px 8px #e4d7cf, 0px 0px 8px #e4d7cf, 0px 0px 8px #e4d7cf, 0px 0px 8px #e4d7cf;
}
.pot .easyread_bg {
	background-color: #e4d7cf;
}
/* green BG: */
.cup .item_info, #cup_btn {
	background-image: url(../img/monogreen.png);
}
.mail_button, .cup, #cup_btn:hover, #cup_btn.btn.active {
	background-image: url(../img/pattern_green.jpg);
	background-repeat: repeat;
    background-color: #dde0c7;
}
#cup_btn, .mail_button {
	text-shadow: 0px 0px 8px #dde0c7, 0px 0px 8px #dde0c7, 0px 0px 8px #dde0c7, 0px 0px 8px #dde0c7;
}
.cup .easyread_bg {
	background-color: #dde0c7;
}
/* blue BG: */
.vase .item_info, #vase_btn {
	background-image: url(../img/monoblue.png);
}
.vase, #vase_btn:hover, #vase_btn.btn.active {
	background-image: url(../img/pattern_blue.jpg);
}
#vase_btn, .vase, .explanation {
	background-repeat: repeat;
    background-color: #cde1e3;
}
#vase_btn {
	text-shadow: 0px 0px 8px #cde1e3, 0px 0px 8px #cde1e3, 0px 0px 8px #cde1e3, 0px 0px 8px #cde1e3;
}
.vase .easyread_bg, .explanation .easyread_bg {
	background-color: #cde1e3;
}

#showroom {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	box-sizing: border-box;
	width: 100%;
    padding: 0px 15px;
}
/* 3 showcases beside each other if the windows width is bigger than 1000px and smaller than 1900px */
.showcase {
	display: none; /* by standard .showcase elements are hidden if JavaScript does not add the .show class to it */
	padding: 0px;
	margin: 0px;
	box-sizing: border-box; /* padding + border are included in the elements width and height */
}
/* JavaScript adds or removes the .show class to filtered .showcase elements */
.show {
    display: block;
}
@media screen and ( max-width: 1100px ) {
    #showroom {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and ( min-width: 1800px ) {
    #showroom {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media screen and ( min-width: 1300px ) {
    #showroom {
        gap: 40px;
        padding: 0px 20px;
    }
}

.showcase img, .chaire, .pot, .cup, .vase {
    border-radius: 4px;
}
.showcase, .chaire, .pot, .cup, .vase  {
    line-height: 0px;
}
.showcase h6, .showcase p {
    box-sizing: border-box;
}
.showcase p {
    margin: 0px;
    padding: 0px;
}
#michikawa {
    font-size: 80%;
    text-align: left;
    width: 100%;
    margin: 0px auto 0px auto;
    padding: 0px 15px 5px 15px;
    box-sizing: border-box;
}


/* VITAE */
#vitaportrait {
	position: relative;
    left: 0px;
    top: 0px;
	float: left;
	width: 400px;
	height: 410px;
	padding: 0px;
	margin: 0px;
	z-index: 1;
}
#vitaspan{
	font-size:0.9em;
	color: #7f4c32;
    text-transform: none;
}
#vitatable {
	width: 100%;
	min-width: 600px;
	border: 0px;
	padding: 20px 0px 0px 0px;
	margin: 0px;
}
#vitatable td {
  vertical-align: top;
}
.year {
	font-weight: bold;
}
@media screen and ( max-width: 960px ) {
    h5 {
        word-spacing: 15px;
        letter-spacing: 2px;
        top: 130px;
        padding-top: 55px;
    }
}
@media screen and ( max-width: 910px ) {
    h5 {
        font-size: 25px;
        word-spacing: 20px;
        letter-spacing: 4px;
    }
}
@media screen and ( max-width: 870px ) {
    #vitaportrait {
	    width: 272px;
	    height: 279px; /*zuvor ohne mobile Angabe und width: 240px; height: 246px;*/
    }
    h2 {
        top: 70px;
    }
    h5 {
        top: 45px;
    }
}
/* NEW for mobile START*/
@media screen and ( max-width: 750px ) {
    #vitaportrait {
	    width: 400px;
	    height: 410px;
        float: none;
        margin-left: 20%;
    }
    h2 {
        padding-top: 10px;
        top: 0px;
    }
    h5 {
        padding: 0px;
        top: 0px;
        background-image: none;
    }
}
/* NEW for mobile END*/

/* CONTACT */
form {
	width: 600px;
	margin: 0px;
	margin-left: auto;
	margin-right: auto;
	padding: 25px 0px 30px 0px;
}
form ul {
	list-style: none;
	padding: 10px 0px 10px 0px;
	margin: 0px;
}
form li {
	list-style: none;
	padding: 0px 0px 10px 0px;
	margin: 0px;
}
form label {
	float: left;
	width: 160px;
    margin: 0px;
	padding: 0px;
}
input, textarea.mail {
    font-size: 17px;
    padding-left: 5px;
}
input {
    height: 30px;
}
textarea#mail {
	margin: 0px;
	overflow-y: scroll;
	overflow-x: hidden;
	width: 600px;
}
.mail_button {
	height: 46px;
	width: 161px;
	margin: 0px;
	padding: 0px;
    font-weight: bold;
	letter-spacing: 0px;
}
.red_alert {
	color:  black;
	max-width: 600px;
    padding: 44px 0px 0px 0px;
    margin: 0px;
    margin-left: auto;
    margin-right: auto;
    font-weight: bold;
    font-size: 1.1em;
    text-align: left;
}
.correction {
	border-color: red;
}
#contactpic {
    height: 410px;
	width: 600px;
	display: block;
    margin-left: auto;
    margin-right: auto;
	padding: 0px 0px 45px 0px;
}