@font-face {
   font-family: 'robotolocal';
   src: url('/PT_Sans-Regular.ttf')
}

* {margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;}

body{
	background-color: #E6E2DE; 
	font-family: robotolocal;
}

img.logo-home{
	width: 96%;
	left: 2%;
	margin-top: -60px;
	margin-bottom: 10px;
}

img.logo{
	width: 0px;
	visibility: hidden;
}

div.topbar{
	height: 68px; 
	width: 100%;
}

div.footer{
	text-align: center;
   width: 100%;
   margin-bottom: 16px;
}

span.footer{
   color:#AFAAA6;
}

div.coverall {
	position: fixed;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background-color: rgba(20, 20, 20, 0.8);
	z-index: 1000;
	display: none;
}

div.shCover {
	position: fixed;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background-color: rgba(20, 20, 20, 0.8);
	z-index: 99;
	display: none;
}

img.coverall {
	object-fit: contain;
	height: 98%;
	width: 98%;
	position: fixed;
	left: 1%;
	top: 1%;
}

div.flex_container{
	display: flex;
	flex-wrap: wrap;
	margin-left: 0px;
	width: 100%;
}

div.imgPreview{
   width: 42.5%;
   margin-left: 5%;
   margin-bottom: 20px;
   margin-top: 20px;
   background-color: #fff;
	box-shadow: 0px 0px 10px rgba(200, 200, 200, 0.3);
}

div.imgPreviewDescription {
   padding: 0px 4px 4px 4px;
}

img.preview{
	height: 240px;
	width: 100%;
	object-fit: cover;
}

div.blocks{
  border:1px solid #A39B99;
  border-left: 0px;
  border-right: 0px;
  position:relative;
  margin-top: 6px;
  margin-bottom: 16px;
  margin-left: 0px;
  width: 100%;
  padding: 0px 0px 0px 0px;  
  background-color: #FAFAFA;
  box-shadow: 0px 0px 20px rgba(20, 20, 20, 0.3);
}

div.audioblocks{
  border:1px solid #A39B99;
  border-left: 0px;
  border-right: 0px;
  position:relative;
  margin-top: 6px;
  margin-bottom: 16px;
  margin-left: 0px;
  width: 100%;
  padding: 0px 0px 0px 0px;  
  background-color: #FAFAFA;
  box-shadow: 0px 0px 20px rgba(20, 20, 20, 0.3);
}

div.titles {
	background: linear-gradient(to bottom right, #EDEDED, #E5E1DB) ;
	padding: 8px 8px 8px 8px;
	text-align: center;
	color: #000;
}
	
div.musicnote{
	background-color:#EDA83B ;
	padding: 8px 8px 8px 8px;
	padding-left: 16px;
	padding-right: 16px;
	position: absolute;
	left: 0px;
	top: 0px;
}
	
div.bottom {
	position: absolute; 
	bottom: 0px; 
	left: 0px; 
	right: 0px; 
	width: 100%; 
	background-color: #D9D9D9; 
	border-top: 1px solid #000;
	padding-bottom: 10px;
	padding-top: 10px;
}

audio {
	width: 97%; 
	margin-top: 20px; 
	margin-bottom: 15px;
}

a{
	font-style: normal; 
	color: #993300;
}

a:hover{
	color: #e67300; 
	font-style: inherit;
}

div.button_sh{
	position: fixed;
	z-index: 150;
	height: 48px;
	width: 48px;
	top: 10px;
	left: 10px;
	border-radius: 24px;
	background-color: #6C4F3D;
}

div.button_sh:active .circle_animation{
	animation: circle;
	animation-duration: 0.3s;
	opacity: 1; 
	width: 48px; 
	height: 48px; 
	margin-top: 0px; 
	margin-left: 0px;
}

div.circle_animation{
	width: 48px;
	height: 48px;
	border-radius: 24px;
	background-color: #997D6B;	
	opacity: 0;
	z-index: 148;
}

@keyframes circle{
	0% {opacity: 0; width: 0px; height: 0px; margin-top: 24px; margin-left: 24px;}
	100% {opacity: 1; width: 48px; height: 48px; margin-top: 0px; margin-left: 0px;}
}

div.circle_animation:active{
	animation: circle;
	animation-duration: 0.3s;
	opacity: 1; 
	width: 48px; 
	height: 48px; 
	margin-top: 0px; 
	margin-left: 0px;
}

i{
	
}

div.header_contain {
	border-width: 0px;
	background-color: #fff; 
	position: fixed; 
	top: 0px;
	left: -330px;
	width: 280px; 
	height: 100%;
	margin-left: 0px;
	margin-top: 0px;
	z-index: 100;
	box-shadow: -0px 0px 15px rgba(20, 20, 20, 0.5);
	transition: left 0.2s;
}

div.header {
	position:relative; 
	background: #6C4F3D; 
	width: 100%; 
	height: 100%;
	overflow: auto;
}

div.bar {
	position:absolute; 
	width: 100%; 
	display: flex;
	flex-wrap: wrap;
	margin-top: 68px;
	z-index: 201;
}

div.button {
	color:#fff; 
	margin-top:6px;
	margin-bottom: 6px; 
	width: 100%; 
	height: 48px; 
}

div.button_active {
	color:#fff; 
	margin-top:6px;
	margin-bottom: 6px; 
	background: #4A3629;
	width: 100%; 
	height: 48px; 
}

div.bottombutton{
	position: absolute; 
	bottom: 0px;"
	z-index: 200;
}

p.but {
	font-size: 24px; 
	margin-top: 7px;
}

hr {
	height: 2px; 
	background-color: #000; 
	border-width: 0px;
	margin-top: 10px;
	margin-bottom: 10px;
	
}

p {
	margin-left: 10px;
}

iframe {
	border: 0px solid #000; 
	border-top:0px; 
	border-bottom:0px; 
	padding:0px; 
	width: 100%; 
	margin: 0px;
}

div.contain{
	border: 0px solid #000; 
	border-top:0px; 
	width: 100%; 
	background-color: #fff; 
	position: absolute; 
	bottom: 0px; 
	top: 200px; 
	left: 0px; 
	margin-left: -0%;
	margin-bottom: 0px;
}

ul {
	list-style-type: square;
	margin-left: 20px;
}

div.text_contain {
	padding: 10px;
	margin: 10px;
}

@media screen and (min-width: 1024px) {

	div.flex_container{
		display: flex;
		flex-wrap: wrap;
	}
	
	div.imgPreview{
   width: 14%;
   margin-left: 2.2%;
   margin-bottom: 20px;
   margin-top: 20px;
}

span.imgPreviewDescription {
   
}

img.preview{
	height: 240px;
	width: 100%;
	object-fit: cover;
	box-shadow: 0px 0px 10px rgba(200, 200, 200, 0.3);
}
	
	div.audioblocks{
	  border:1px solid #A39B99;
	  position:relative;
	  margin-top: 16px;
	  margin-bottom: 16px;
	  margin-left: 2%;
	  margin-right: 0%;
	  width: 22.5%;
	  padding: 0px 0px 0px 0px;  
	  background-color: #FAFAFA;
	  box-shadow: 0px 0px 20px rgba(20, 20, 20, 0.3);
	  /*transition: box-shadow 0.2s;
	  transition-timing-function: ease-out;*/
	}	
	
	div.topbar{
		height: 30px;	
	}	
	
	img.logo-home{
		position: absolute;	
		top: 0px;
		left: 10px;
		width: 0px;
		z-index: 120;
		margin-top: 0px;
		visibility: hidden;
	}
	
		img.logo{
		position: absolute;	
		top: 0px;
		left: 10px;
		width: 200px;
		z-index: 120;
		margin-top: 0px;
		visibility: visible;
	}
	
	div.button_sh{
		visibility: hidden;	
	}
	
	div.blocks{
	  border:1px solid #A39B99;
	  border-left: 0px;
	  border-right: 0px;
	  position:relative;
	  margin-top: 16px;
	  margin-bottom: 16px;
	  margin-left: 0px;
	  width: 100%;
	  padding: 0px 0px 0px 0px;  
	  background-color: #FAFAFA;
	  box-shadow: 0px 0px 20px rgba(20, 20, 20, 0.3);
	  /*transition: box-shadow 0.2s;
	  transition-timing-function: ease-out;*/
	}
	
	/*
	div.blocks:hover {
		box-shadow: 0px 0px 20px rgba(20, 20, 20, 0.6)
	}
	*/
	
	div.titles {
		background: linear-gradient(to bottom right, #8E6365, #977D6F) ;
		padding: 8px 8px 8px 8px;
		color: #fff;
	}
		
	div.musicnote{
		background-color:#EDA83B ;
		padding: 8px 8px 8px 8px;
		padding-left: 16px;
		padding-right: 16px;
		position: absolute;
		left: 0px;
		top: 0px;
	}
		
	div.bottom {
		position: absolute; 
		bottom: 0px; 
		left: 0px; 
		right: 0px; 
		width: 100%; 
		background-color: #D9D9D9; 
		border-top: 1px solid #000;
		padding-bottom: 10px;
		padding-top: 10px;
	}
	
	audio {
		width: 97%; 
		margin-top: 20px; 
		margin-bottom: 15px;
	}
	
	div.header_contain {
		border-left: 0px solid #000; 
		border-right: 0px solid #000; 
		background-color: #fff; 
		position: sticky; 
		margin-top: 0px;
		top: -158px; 
		left: 0%; 
		width: 100%; 
		margin-left: 0px;
		z-index: 100;
		box-shadow: -0px 5px 15px rgba(20, 20, 20, 0.5);
		transition: margin-top 0.2s;
	}
	
	div.header {
		position:relative; 
		background: linear-gradient(to bottom right, #ECBBB2, #CDAB96); 
		width: 100%; 
		height: 200px;
	}
	
	div.bar {
		position:absolute; 
		bottom:0px; 
		background-color: #918383; 
		width: 100%; 
		height: 40px; 
		border-bottom: 2px solid #595050; 
		border-top: 2px solid #595050;
	}
	
	div.button {
		color:#000; 
		position:relative; 
		margin-left: 5px; 
		margin-bottom:5px;
		margin-top:5px; 
		background: linear-gradient(#fff, #F5F5F5); 
		width: 200px; 
		height: 30px; 
		float:left; 
		display: table-cell; 
		text-align: center; 
		vertical-align: middle;
	}
	
	div.button:hover {
		background: linear-gradient(#AB9A9A, #7b6b6b); 
		color: #fff; 
		cursor: pointer;
	}
	
	div.button:active {
		background: linear-gradient(#453E3E, #7b6b6b); 
		color: #fff; 
		cursor: pointer;
	}
	
	div.button_active {
		color:#fff; 
		position:relative; 
		margin-left: 5px; 
		margin-bottom:5px;
		margin-top:5px; 
		background: linear-gradient(#453E3E, #7b6b6b); 
		width: 200px; 
		height: 30px; 
		float:left; 
		display: table-cell; 
		text-align: center; 
		vertical-align: middle;
	}
	
	
	div.bottombutton{
		position: absolute; 
		right: 10px;
		top: 2px;
	}
	
	p.but {
		margin-left: 5px; 
		margin-top: 5px;
		font-size: 16px;
	}
	
	hr {
		height: 2px; 
		background-color: #000; 
		border-width: 0px;
		margin-top: 10px;
		margin-bottom: 10px;
		
	}
	
	p {
		margin-left: 5px;
	}
	
	iframe {
		border: 0px solid #000; 
		border-top:0px; 
		border-bottom:0px; 
		padding:0px; 
		width: 100%; 
		margin: 0px;
	}
	
	div.contain{
		border: 0px solid #000; 
		border-top:0px; 
		width: 100%; 
		background-color: #fff; 
		position: absolute; 
		bottom: 0px; 
		top: 200px; 
		left: 0px; 
		margin-left: -0%;
		margin-bottom: 0px;
	}
	
	ul {
		list-style-type: square;
		margin-left: 20px;
	}
	
	div.text_contain {
		padding: 10px;
		margin: 10px;
	}
}