html, body{
	padding:0;
	margin:0;
	height:;

}	
h1{

	background-color: rgba(192, 192, 192, 1.0);
	padding:20px;
	border-radius:0;
	color:white;
	text-align:center;
	font-size:25px;
}
.container{
	/*background-image: url("css_images/image1.jpg");*/
	margin:0 auto;
	/*background-repeat:repeat-y;*/
    /*background-size:cover;*/
}
.nav{
	display:block;
	padding:5px;
	text-align:center;
	
}
.nav li{
	display:inline-block;
	padding:10px;
	background-color:black;
	margin:2px;
	color:white;
	text-decoration:none;
	
}

.top-nav {
  overflow: hidden;
  background-color: #333;
  text-align:center;
}
.top-nav a li{
  list-style-type:none;
}
.top-nav a {
  display:inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
 
}
.top-nav a:hover {
  background-color: #ddd;
  color: black;
}
.top-nav a.active {
    background-color: #4CAF50;
    color: white;
}

/*header banner START*/
.bgimg-1 {
  background-image: url("css_images/piano1.jpg");
  height: 40%;
  animation-name: landing_page;
  animation-duration: 32s;
  animation-iteration-count: infinite;
}
@keyframes landing_page {
    0% {background-image: url("css_images/piano1.jpg"); background-size: 100% 100%;}
	25% {background-image: url("css_images/piano2.jpg"); background-size:100% 100%; }
    50%  {background-image: url("css_images/piano3.jpg"); background-size:100% 100%;}
    75%  {background-image: url("css_images/piano1.jpg"); background-size:100% 100%;}
	100% {background-image: url("css_images/piano2.jpg"); background-size:100% 100%;}
}

.caption {
  position: absolute;
  left: 0;
  top: 34%;
  width: 100%;
  text-align: center;
  color: #000;
}
.box1 {
  background-color: #111;
  color: #fff;
  padding: 10px;
  font-size: 15px;
  letter-spacing: 10px;
}
.box2 {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 20px;
}
/*header banner END*/


.content{
	position:relative;
	padding:50px;
	font-size:30px; 
	width:;
	height:100%;
	/*background-color:white;*/
}
.content li {
	margin:20px; 
	display:block;
	transition: .5s ease;
}
.content li:hover  {
  width: 100%;
  background-color: rgba(231, 231, 231, 1);
}
.preview{display:inline-block; width:40%; position:fixed;}

aside{
	float:left;
	margin-left:20px; 
	font-size:17px;
	padding:50px;
	height:100%;  
}
aside li {margin:20px;}

/*the table properties START*/
/*
table.jokes{
	float:left;
	position:absolute;
	top:530;
	margin-left:250px;
}*/
td{
	width:;
	height:;	
}
td a{
}
td img {
	width:90%;
	height:auto;
	margin-bottom:20px;
	-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
	-webkit-border-radius:5px;
	-o-transition-property:width,height,-o-transform,background,font-size,opacity;
	-o-transition-duration:1s,1s,1s,1s,1s,1s;
	-moz-transition-property:width,height,-o-transform,background,font-size,opacity;
	-moz-transition-duration:1s,1s,1s,1s,1s,1s;
	transition-property:width,height,transform,background,font-size,opacity;
	transition-duration:1s,1s,1s,1s,1s,1s;

}
td img:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2);
	width:97%;
	border-radius:5px;
	
}
.thisBox {
  position: relative;
}
.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  /*background-color: rgba(255, 255, 255, 0.8);*/
  background-color: rgba(63, 70, 84, 0.55);
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}
.thisBox:hover .overlay {
  bottom: 80;
  height: 20%;
  width: 95.4%;
  border-top:3px solid rgb(154, 165, 186);
  border-bottom:3px solid rgb(154, 165, 186);
}
.text {
  white-space: nowrap; 
  color: white;
  font-weight:bold;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);

}
/*the table properties END*/

.clear{
	clear:left;
	border:0px solid black;	
	height:10px;
}

footer img {
	height:50px;
	width:50px;
	margin:0;
	padding:0;
}

.privacy{
	display:block;
	margin:0 auto;
	padding:0 30px 50px 30px;
	width:80%;
}

/*media queries 1290px START here*/
@media screen  and (max-width: 800px){

	.text {
		font-size: 17px;
	}

}

/*media queries 1290px END here*/



/*media queries 900px START here*/
@media screen  and (max-width: 900px){
	
	.content{
		font-size:20px; 
	}
	
	.caption {
		top: 320;
	}
	
	.box2 {
		padding: 10px;
		font-size: 25px;
		letter-spacing: 3px;
	}
	
}
/*media queries 900px END here*/



/*media queries 650px START here*/
@media screen and ( max-width:650px){
	.bgimg-1 {
		height:30%;
	}
	
	 .caption {
		top: 30;
	}
	
	.top-nav a {
		color: white;
		padding: 12px;
		font-size: 11px;
	}
	

}
/*media queries 900px END here*/



/*media queries 480px START here*/
@media screen  and (max-width: 480px){
	/*nav queries START
	.top-nav {
    color: white;
    padding: 16px;
    font-size: 16px;
  }

  .top-nav-dropdwn {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  .top-nav-dropdwn a {
	display: block;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
	font-size: 14px;
	width:100%;
	text-align:left;
  }

  .top-nav-dropdwn a:hover {background-color: grey}

  .top-nav:hover .top-nav-dropdwn {
    display: block;
  }

  .top-nav:hover {
    background-color: grey;
  }
  Nav queries END*/
  
	.bgimg-1 {
		height:30%;
	}
	
	.top-nav a {
		color: white;
		padding: 11px;
		font-size: 11px;
	}	
	
	.box2 {
		padding: 10px;
		font-size: 18px;
		letter-spacing: 3px;
	}
	
	.container{
		display:block;
		margin:0 auto;
		margin:0px 10px;
	}
	
	.content{
		font-size:12px;
		padding:0;
		margin:0;
	}
	
	.MobPreview{
		display:block; 
		width:100%; 
	}
	
	.Archives{
		float:none;
		display:none;
		margin:0;
		height:0;
	}
	
	.Archives a li{
		float:none;
		display:none;
		margin:0;
		padding:0;
		height:; 	
	}
	
	table{
		float:none;
		display:block;
		position:static;
		top:none;
		margin:0;
	}
	
	td a img{
		margin:5px;
	}
	
	.overlay {
	  position: absolute;
	  bottom: 100%;
	  left: 0;
	  right: 0;
	  background-color: rgba(255, 255, 255, 0.9);
	  overflow: hidden;
	  width: 100%;
	  height:0;
	  transition: .5s ease;
	}
	
	.thisBox:hover .overlay {
	  bottom: 0;
	  height: 20%;
	  width: 100%;
	}
	
	.text {
	  white-space: nowrap; 
	  color: black;
	  font-weight:bold;
	  font-size: 10px;
	  position: absolute;
	  overflow: hidden;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  -ms-transform: translate(-50%, -50%);
	}
	
}
/*media queries 480px END here*/

/*media queries 380px START here*/
@media screen  and (max-width: 380px){
	
	.box2 {
		padding: 10px;
		font-size: 9.5px;
		letter-spacing: 3px;
	}
	
}
/*media queries 380px END here*/