/* CSS Document */
body {background-color: white;
 background-image: url('../music/img/backm15.webp'); /* backm10 */
 background-repeat: repeat;
 background-attachment: fixed;
 }
@media only screen and (max-width:925px) {
 body { background-image: url("../music/img/backm2.webp");} 
}
img {display: inline-block;}

.headtopm {border:solid 0px#FFFFFF;
 background-image: url('../music/img/topbar25m.webp');
 background-size:100% 100%;
 /* background-color: #080033ec; */
 padding: 2px 1px;}
.toplinkscroll {
 background-image: url('../music/img/backm15.webp'); }
@media only screen and (max-width: 925px) {
 .toplinkscroll {background-image: url('../music/img/backm2.webp'); }}

a {font-family: Courier, AS-TTDurga, Blackadder ITC, Bodoni MT;}
a.a02:link {text-decoration: none;
 color: #0000FF; 
 font-weight: bold;
 font-family: Georgia, "Times New Roman", Times, serif;}
a.a02:visited {text-decoration: none;
 color: blue;
 font-weight:bold;}
a.a02:hover {text-decoration: underline;}
a.a04:link {text-decoration: none;
 color: #1e73be;
 font-size: 26px;
 font-family: "Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif; /*Georgia, "Times New Roman", Times, serif; */
}
a.a04:visited {text-decoration: none;
 color: #FF4530;}
a.a04:hover {text-decoration: none;
 color: #F25511;}
   
.style10 {font-size: 18px;
 font-family: Georgia, "Times New Roman", Times, serif;  /* "Arial", Arial Narrow, Calibri; */ 
 color: #330032;}
.style10n {font-size: 18px;
 font-family: Calibri, Georgia, "Times New Roman";
 color: #2c012b;
 padding-left: 15px;padding-right: 15px;
 }
.style11 {font-size:18px;
 font-family: "Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif; /*Verdana, Arial, Helvetica, sans-serif; */
 color:#281300;}
.style11ab {line-height: 1.6;}
.style45 {color: #09044b;
 font-family: Accushi, "Agency FB", Perpetua;
 font-size:22px;	}
.style51 {font-size:17.5px;
 color: rgba(0, 0, 0, 0.799);
 font-family: Verdana, Geneva, Tahoma, sans-serif;
 line-height: 1.6;}
.style71m {color:#080033dc;
 font-family: "Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif;
 font-size:18px;}
.style4top {font-size: 20px;
 font-weight: bold;
 /* font-family: Courier New, Courier, monospace; */
 font-family: 'Sofia', cursive;
 color:#faefd1f7;}
@media only screen and (min-width: 550px) and (max-width:975px) {
 .style11, .style10, .style10n, a.a03d:link, .style51, a.a02:link, .style16, .style71m {
  font-size:17px; }
 .style45 {font-size:20px;}
 a.a04:link {font-size: 21px;}
 .style4top {font-size: 18px;}
}
@media only screen and (min-width: 75px) and (max-width:550px) {
 .style11, .style10, .style10n, a.a03d:link, .style51, a.a02:link, .style16, .style71m {
 font-size:16px; }
 .style51 {line-height: 1.75;}
 .style45 {font-size:18px;}
 .style4top {font-size: 17px;}
 a.a04:link {font-size: 20px;}
}
@media only screen and (max-width:400px) {
 .style4top {font-size: 16px; }}

@keyframes smooth {
 from {top:100px; opacity:0.5} to {top:0; opacity:1}}
@-webkit-keyframes smooth {
 from {top:100px; opacity:0.5} to {top:0; opacity:1}}
@media only screen and (max-width: 675px) {
 /* For mobile phones: */
 img.song {width: 63%;
 margin-top: 0; }}
@media only screen and (min-width: 675px) and (max-width: 875px) {
 /* For tabs: */
 img.song {width: 60%;
 margin-top: 0;}}
@media only screen and (min-width: 875px) and (max-width: 1050px) {
 /* For medium-big screens: */
 img.song {width: 57%;
 margin-top: 0;} }
@media only screen and (min-width: 1050px) and (max-width: 1250px) {
 /* For medium-big screens: */
 img.song {width: 55%;
 margin-top: 12px;}}
@media screen and (max-width: 450px) {
 img.song { width: 75%; }}

/* Iframe youtube videos starts */
.ycontainer {position: relative;
 width: 80%;
 padding-top: 32%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
 background-color: white; 
}
/* Then style the iframe to fit in the container div with full height and width */
.yresponsive {
 position: absolute;
 top: 0;bottom: 0;
 left: 0;right: 0;
 width: 100%;
 height: 100%;
}
@media only screen and (max-width: 675px) {
 .ycontainer {width: 95%;  padding-top:47%; }}
@media only screen and (max-width: 475px) {
 .ycontainer {padding-top:52%; }}
/* Iframe youtube ends */

.buttond:hover {background-color: #242424;}
a.buttond:hover {color:white;}
.button3 {color: rgb(0, 0, 0);
 background-color: #faeba820;  /* rgb(129, 105, 44) good color, #032802b0; */
 background-image: url('../music/img/ddm331.webp');
 background-size: 100% 100%;
 border: 1px solid black;
 border-radius: 3% 11%;
 /* font-family: Arial, Helvetica, sans-serif; */
 font-family: Verdana, Geneva, Tahoma, sans-serif;
 /* font-weight: bold; */
 padding: 10px 10px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 1.075rem;
 margin: 4px 2px;
 cursor: pointer;
}
a.button3:link {color: rgb(0, 0, 0);}
a.button3:visited {color: rgb(0, 0, 0);}
.button3:hover {
 opacity: 0.8;
 box-shadow: 0px 10px 18px rgb(92, 19, 5);  /* glowing effect */
 /* background-color: rgb(82, 81, 81); */
 cursor: pointer;
}

.part1, .part2 {    /* Sham Hui Phir alignments */
 width: 50%;
 padding: 0 1%;
 float: left;
 text-align: left;
}
.part2 {text-align: right;}
@media only screen and (max-width:1200px) {
 .part1, .part2 {width: 100%;
 padding: 0 2%;
 text-align: center;}}