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

html, body {
	padding: 0;
	margin: 0;
	height: auto
}
body {
	background-color: #D5D5D5;
}
header {
	position: fixed;
	z-index: 5;
	left: 0;
	top: 0;
	width: 100%;
	height: 175px;
	margin: 0;
	background-color: #222;
	background-image: url(../img/drum.png), url(../img/name.png), url(../img/grayTiled.jpg);
	background-repeat: no-repeat, no-repeat, repeat;
	background-position: center, 25px, 0 0;
	background-size: 9%, 25%, 12%;
	-webkit-box-shadow: 0 4px 4px -2px #000000;
	-moz-box-shadow: 0 4px 4px -2px #000000;
	box-shadow: 0 4px 4px -2px #000000;
}
br {
	padding: 0;
	margin: 0;
}
section.lineholder {
	display: absolute; top:0;
	width: auto;
	height: auto;
	margin-left: 85%;
	margin-top:10px;
	padding:0;
}
.frame {width: 50%; height:auto}


/* ========================================= */

/*section.lineholder img {width:100px; height:auto;}*/


.photo {
	position: fixed;
	margin-left: 23%;
	margin-right: auto;
	z-index: 1;
	margin-top: 175px;
	width: 54%;
	height: auto;
	object-fit: contain;
	border: 1px solid white;
	border-top: none;
}
.photo img {
	width: 100%;
	height: auto;
}
.mug {
	position: fixed;
	left: 50px;
	bottom: 0;
	height: 100px;
	width: auto;
}
.readmore {
	color: #09C;
	font-variant: small-caps;
	font-family: "Lucida Console", Monaco, monospace;
	font-size: 14px;
	font-weight: 600;
}
.main {
	margin-left: 21.5%;
	margin-right: auto;
	display: block;
	position: absolute;
	width: 50%;
height: height:900px;
	background-color: #fff;
	z-index: 3;
	top: 94%;
	line-height: 1.50;
	font-size: 1.25em;
	padding: 55px;
	padding-top: 5px;
	box-shadow: 0px 0px 20px #222;
}
span.words {
	width: 100%;
	height: auto;
}
.words {display:block; text-indent: 30px;}
.taza {
	display: none;
}
 @media screen and (max-width: 800px) {
body {
	display: block;
	padding: 0;
	margin: 0;
}
header {
	position: relative;
	z-index: 0;
	left: 0;
	top: 0px;
	width: 100%;
	height: 100px;
	margin: 0;
	padding: 0;
	background-color: #222;
	background-image: url(../img/drum.png), url(../img/name.png), url(../img/grayTiled.jpg);
	background-repeat: no-repeat, no-repeat, repeat;
	background-position: 90%, 25px, 0 0;
	background-size: 12%, 50%, 12%;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	border: none;
}
.photo {
	position: relative;
	width: 100%;
	height: auto;
	border: none;
	z-index: 0;
	margin: 0;
	padding: 0;
	top: 0;
}
.mug {
	display: none
}
.readmore {
	display: none;
}
.taza {
	display: block;
	position: relative;
	text-align: center;
	left: 0%;
	top: 90%;
	height: 75px;
	width: 100%;
}
.main {
	position: relative;
	width: 96%;
	padding: 25px;
	padding-top: 5px;
	z-index: 0;
	margin: 0;
	top: 0;
}
section.lineholder {
	display: none
}
}