@font-face {
    font-family: Localfont; src: url(../css/dauphinn.ttf);  /*   - OK*/ 
}
@font-face {
    font-family: Localfont0; src: url(../css/lydian.TTF);  /*   - OK*/  
}
@font-face {
    font-family: Localfont1; src: url(../css/IMPACT.TTF);  /*   - OK*/
}
@font-face {
    font-family: Localfont2; src: url(../css/spr133.ttf);  /* Spray Script  - OK*/
}
@font-face {
    font-family: Localfont3; src: url(../css/PenguinBold.ttf); /*   - OK*/
}
@font-face {
   font-family: Localfont4; src: url(../css/aardvrkb.ttf);  /* AARDVRKB.TTF   aardvrkb.ttf*/
   font-weight: bold;
}
@font-face {
   font-family: Localfont5; src: url(../css/CASSH.TTF);  /*   - OK*/
}
@font-face {
   font-family: Localfont6; src: url(../css/FUTURAXK.TTF);  /*   - OK*/
}
@font-face {
   font-family: Localfont7; src: url(../css/FUTURAK.TTF);   /*   - OK*/
}
@font-face {
   font-family: Localfont8; src: url(../css/PAPSH.TTF);   /*   - OK*/
}
@font-face {
   font-family: Localfont9; src: url(../css/shadser.TTF);   /*   - OK*/
}
@font-face {
   font-family: Localfont10; src: url(../css/sham.TTF);   /*   - OK*/
}
@font-face {
   font-family: Localfont11; src: url(../css/shlop.TTF);   /*   - OK*/
}
@font-face {
   font-family: Localfont12; src: url(../css/slant.TTF);   /*   - OK*/
}
@font-face {
   font-family: Localfont13; src: url(../css/smoke.TTF);   /*   - OK*/
}
@font-face {
   font-family: Localfont14; src: url(../css/standout.TTF);   /*   - OK*/
}
@font-face {
   font-family: Localfont15; src: url(../css/stao.TTF);   /*   - OK*/
}
@font-face {
   font-family: Localfont16; src: url(../css/vinet.ttf);   /*   - OK*/
}
@font-face {
   font-family: Localfont17; src: url(../css/WEHSH.TTF);   /*   - OK*/
}
@font-face {
   font-family: Localfont18; src: url(../css/ALWSH.TTF);   /*   - OK*/
}
@font-face {
   font-family: Localfont19; src: url(../css/BLBSH.TTF);   /*   - OK*/
}
@font-face {
   font-family: Localfont20; src: url(../css/Frnkvent.ttf);   /*   - OK*/
}
@font-face {
   font-family: Localfont21; src: url(../css/showboa.TTF);   /*   - OK*/
}



/*
background-image: url('img/header.png'), url('img/bandset1.png'); background-repeat: no-repeat, no-repeat; background-color: transparent; background-size: 200px Auto, 300px Auto; background-position: 10px 55px, top right; 
*/

body,h1,h2,h3,h4,h5 {font-family: "Poppins", sans-serif;}
body {font-size:16px;}
.w3-half img{margin-bottom:-6px;margin-top:16px;opacity:0.8;cursor:pointer}
.w3-half img:hover{opacity:1;}
.w3-third img{margin-bottom:-6px;margin-top:16px;opacity:0.8;cursor:pointer}
.w3-third img:hover{opacity:1;}
.mainHeader {font-family: Lobster, Sans-serif; color:teal; padding:0px; margin:0px;}
.subHeader {font-family: Lobster, Sans-serif; color:purple; padding:0px; margin:70px 0px 0px 0px;} /*need media rules*/
.subHR {margin:-10px 0px 0px 60px; width:50px;border:5px solid #0099cc;}
.tightSpace {margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;}
.dkGreen {background-color:#001a00; color:white;}
.dimImg img{opacity:1;}
.dimImg img:hover{opacity:0.7;}
.mySlides {display:none;}
 

/* Position text in the middle of the page/image */
#caption {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 6px solid #f1f1f1;
  position: absolute;
  top: 95%;
  left: 50%;
/*left: calc(100% - 230px);  */
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 95%; max-width:500px;
  padding: 5px;
  text-align: center;
}
#caption2 {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 6px solid lime;
  position: absolute;
  top: 65px;
/*  left: 50%; */
/*left: calc(100% - 230px);  */
  transform: translate(-50%, -50%);
  z-index: 2;
/*  width: 60%; max-width:500px;  */
  padding: 5px;
  text-align: center;
}
#imgNote:hover {
/*  display:run-in; */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  top: 20%;
  width: auto; /* 30%; */
  right: -90px; 
/*  margin-right:50px; */
  float:right;
  position: fixed;
  transform: translate(-50%, -50%);
  z-index: 8;
  padding: 0px 5px 0px 5px;
  text-align: center;
}
/* -------- ---------- */
.subitem {
	width: 25%;
	height: 40px;	
	float: left; 
	border: 1px solid #C3CEAC;
	border-radius: 10px;
	padding: 1px 3px 1px 3px;
	margin: 7px 0px 0px 7px;
}
.subitem2 {
	width: 18%;
	height: 309px;	
	float: right;
	border: 1px solid #C3CEAC;
	border-radius: 10px;
	padding: 3px 3px 3px 3px;
	margin: 3px 3px 3px 3px;
}
.subitem3 {
	width: 912px; /*62%; */
	height: 309px;	
	float: left;
	border: 1px solid #C3CEAC;
	border-radius: 15px;
	padding: 3px 3px 3px 3px;
	margin: 3px 3px 3px 3px;
/*	align: center;
	vertical-align: middle; */
}
/* ---- ------- */
#grad1 {
    height: 55px;
    background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Fx 3.6 to 15 */
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* Standard syntax (must be last) */
	white-space: nowrap;  /*to  force no-wrap for text in p tag*/	
	position: relative;
	z-index: 2;
	vertical-align:middle;
	overflow:hidden;
	width:calc(100% - 270px); /* this important to keep grda1 in position & not to wrap to next line out of view*/
	height:40px; 
	font-family: Localfont3, Penguin, Arial, Verdana; 
	font-size: 22px;
}
#grad2 {
    height: 55px;
    background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Fx 3.6 to 15 */
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* Standard syntax (must be last) */
}
#grad3 {
    height: 55px;
    background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Standard syntax (must be last) */
}
#grad4 {
  height: 55px;
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1)); /*Safari 5.1-6*/
  background: -o-linear-gradient(right,rgba(255,255,255,0),rgba(255,255,255,1)); /*Opera 11.1-12*/
  background: -moz-linear-gradient(right,rgba(255,255,255,0),rgba(255,255,255,1)); /*Fx 3.6-15*/
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)); /*Standard*/
} 
#grad5 {
    height: 55px;
    background: -webkit-linear-gradient(right, rgba(195,209,209,0), rgba(195,209,209,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left, rgba(195,209,209,0), rgba(195,209,209,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left, rgba(195,209,209,0), rgba(195,209,209,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to left, rgba(195,209,209,0), rgba(195,209,209,1)); /* Standard syntax (must be last) */
}
#grad6 #mvMainPage {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, red, yellow); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, red, yellow); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, red, yellow); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, red, yellow); /* Standard syntax */
} 
#grad-X { /*  using gradient as back image where needed */
  height: 55px;
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

/* ---- ------------------------------- */
#scrolMsg {
  position: relative; /*absolute;  */
  width: 100%; /*10%; */
  height: 100%;
  /*background-color: #4CAF50;	
  margin-left: -98%; ;*/
  color: white;
  text-align: right;
/*  font: bold 24px Penguin, Arial, Verdana, Helvetica, sans-serif; */
  font-family: Localfont3, Penguin, Arial, Verdana; 
  font-size: 22px;	
  z-index: 3;
  vertical-align:middle;
  margin: -22px 0 0 99%;
  text-shadow: 2px 2px #000000;
  animation: scrollmove 120s infinite linear;
}
/* ---- ------- */
@keyframes scrollmove { /*  not supported in Internet Explorer 9 and earlier versions  */
  0%   {margin-left: 100%;}
  100% {margin-left:calc(-3620px);  /* 2990px  - specify based on overall length of label / div element */
  }
}
/* ---- ---------------------------- */

.smediaPanel {
	position: relative;
	float:right;
	width:100%; /*1250px; */
	height: 54px;
	overflow: hidden; 
	border: 1px solid #C3CEAC;
	vertical-align:middle;
    text-align: right;
	background-color:#f0f5f5;
	margin: 1px 1px 1px 1px;
}
.smediaPanel i {
	border: 2px solid white;
}
.smediaPanel i:hover {
	border: 2px solid red;
	cursor:pointer;
}
.smediaPanel div {
/*	border: 1px solid green;*/
	/*background-color:#336699; */
/*	float: left;
	width: 70%;
	height: 48px;
	border-radius: 10px;	
	padding: 0px 0px 0px 0px;
	margin: 1px 1px 1px 5px;
    text-align: left;
	vertical-align:middle; */
/*  	background: #336699; */ /* For browsers that do not support gradients */
/*    background: -webkit-linear-gradient(bottom, rgba(4,90,117,0), rgba(4,90,117,1));* /* For Safari 5.1 to 6.0 */
/*     background: -o-linear-gradient(top, rgba(4,90,117,0), rgba(4,90,117,1));*/ /* For Opera 11.1 to 12.0 */
/*     background: -moz-linear-gradient(top, rgba(4,90,117,0), rgba(4,90,117,1));*/ /* For Firefox 3.6 to 15 */
/*     background: linear-gradient(to top, rgba(4,90,117,0), rgba(4,90,117,1));*/ /* Standard syntax (must be last) */

}
.smediaPanel div div {
/*	border: 0px solid green;*/
/*	background-color:#336699;  /*#006666; */
/*	color: white;
	padding: 1px 3px 1px 3px;
	margin: 0px 0px 0px 0px;
	float: right;
	width: 100%;
	height: 42px;
	border-radius: 10px;
	vertical-align:middle;
	font: 14px Arial, Verdana, Helvetica;
*/
}
.smediaPanel span {
/*	width: 90px;
	float:left;
	vertical-align:middle;
	font: bold 18px Verdana, Arial ,Helvetica;
	padding: 1px 1px 1px 3px;
    text-align: center;
	color:#006666; */
}
/* ---- ------- */
/* When you move the mouse over the icon, change color */
.fa-user:hover {
  color: #eee;
}

/* ---------Flip Image  ------------ */
.flip-box {
  background-color: transparent;
  width: 400px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-front {
  background-color: #bbb;
  color: black;
}

.flip-box-back {
  background-color: teal;
  color: white;
  transform: rotateY(180deg);
}
/* ---------Flip Image End ------------ */
#mySidebar {
	 background-image: url("../img/bandset1.png"), url('../img/Saxophones_x.png'), url('../img/floral-banner.png'), url('../img/piano1x.png'), url('../img/decoupage-flower.png'), url('../img/bandset1.png'); 
	 background-repeat: repeat-x, no-repeat, no-repeat, no-repeat, no-repeat, repeat-x; 
	 background-color: transparent; 
	 background-size: 80px Auto, 200px Auto, 180px Auto, 150px Auto, 75px 200px, 80px Auto;
	 background-position: bottom left, 140px 320px, bottom left, bottom center, bottom right, top left;
}
  #footr {
    background-image: url("../img/bandset1.png");
	background-repeat: repeat-x;
	background-color: transparent;
	background-size: 80px Auto;
	background-position: bottom left;
	  
  }
  header {
    background-image: url("../img/bandset1.png");
	background-repeat: repeat-x;
	background-color: transparent;
	background-size: 80px Auto;
	background-position: center left;
	  
  }
 #imggrow:hover {
	 width: 20%; max-width:600px;
	 position: absolute;
/*	  width: 100px;
	  height: 100px;  
	  background: red; 
	  transition: width 4s;
	  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); */
 }
@media screen and (max-width: 600px) {  /* between 0 and 600 pixels wide  */
  #home {  /*  less than 400 px */
    background-image: url('../img/header.png'), url('../img/bandset1.png'), url('../img/Saxophones.png');
	background-repeat: no-repeat, no-repeat, repeat-x;
	background-color: transparent;
	background-size: 200px Auto, 300px Auto, 100px Auto;
	background-position: 10px 55px, top right, top left;
	margin: 10px 10px 0px 300px; 
  }
 .topBanner {margin-top:40px;}	
 #modal01 {
	background-color: black;
	background-image: url('../img/Saxophones.png'), url('../img/piano1x.png'), url('../img/Saxophones_x.png'); 
	background-repeat: no-repeat, no-repeat, no-repeat; 
	background-size: 150px 300px, 300px 350px, 150px 300px;
	background-position: bottom left, bottom center, bottom right;
  }
  #infoX {
	font-family: Localfont, "Poppins", sans-serif; text-align:justify; font-size: 14px;font-weight: bold; color:darkgreen; 
  }
  #storesDisplay div div a img { /* stores icon */
	width:100px; height:50px;
	margin:4px 4px 4px 4px;	
	border-radius: 15px;
  }
  #welC1,#welC2,#welC3 {margin: 90px 0px 0px 0px;}
  #caption2 {width: 80%; max-width:500px;}
  #muCaseX,.trackCase {width:95%;border: 2px solid lime; padding:0px 0px 0px 0px; margin-left:calc((100% - 95%)/2)}
  #popLink {
	background-image: url("../img/piano1x.png");
	background-repeat: no-repeat;
	background-color: transparent;
	background-size: 120px Auto;
	background-position: top right;
	width:Auto; height:150px;	
	margin: 0px 0px 0px 340px; 
    background-color: #f2ffe6;
  }
  #advLink {
	  width: calc(100% - 480px);
	  min-width:330px;
  }
  
}
/* @media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {  */
@media screen and (min-width: 601px) and (max-width: 991px) {  /* between 600 and 992 pixels wide  */
  #home {
    background-image: url("../img/bandset1.png"), url('../img/Saxophones.png'), url('../img/header.png');
	background-repeat: no-repeat, repeat-x, repeat-x;
	background-color: transparent;
	background-size: 300px Auto, 100px Auto, 340px 50px;
	background-position: top right, top left, 10px 55px;
	margin: 10px 10px 0px 300px; 
  }
 .topBanner {margin-top:40px;}
 #modal01 {
	background-color: black;
	background-image: url('../img/Saxophones.png'), url('../img/piano1x.png'), url('../img/Saxophones_x.png'); 
	background-repeat: no-repeat, no-repeat, no-repeat; 
	background-size: 180px 350px, 400px 350px, 180px 350px;
	background-position: bottom left, bottom center, bottom right;
  }
  #infoX {
	font-family: Localfont, "Poppins", sans-serif; text-align:justify; font-size: 18px;font-weight: bold; color:darkgreen;  
  }
  #storesDisplay div div a img { /* stores icon */
	width:120px; height:60px;	
	margin:4px 4px 4px 4px;	
	border-radius: 15px;
  }  
  #welC1,#welC2,#welC3 {margin: 90px 0px 0px 0px;}
  #caption2 {width: 70%; max-width:500px;}
  #muCaseX,.trackCase {width:85%;border: 2px solid lime; padding:0px 0px 0px 0px; margin-left:calc((100% - 85%)/2)}
  #popLink {
	background-image: url('../img/piano1x.png');
	background-repeat: no-repeat;
	background-color: transparent;
	background-size: 120px Auto;
	background-position: top right;
	width:Auto; height:150px;	
	margin: 0px 0px 0px 340px; 
    background-color: #f2ffe6;
  }
  #advLink {
	  width: calc(100% - 480px);
	  min-width:calc(100% - 530px);
  }
  
}
@media screen and (min-width: 992px) { /* screen 992px or more */
  #home {
    background-image: url('../img/piano1x.png'), url('../img/bandset1.png'), url('../img/header.png'), url('../img/Saxophones.png');
	background-repeat: no-repeat, no-repeat, repeat-x, repeat-x;
	background-color: transparent;
	background-size: 350px 300px, 300px Auto, 440px 90px, 100px Auto;
	background-position: top center, top right, 0px 0px, top left;
	margin: 0px 0px 0px 300px; 
  }
.subHeader {font-family: Lobster, Sans-serif; color:teal; padding:0px; margin:0px 0px 0px 0px;} /*need media rules*/  
 #modal01 {
	background-color: black;
	background-image: url('../img/Saxophones.png'), url('../img/piano1x.png'), url('../img/piano1.png'), url('../img/Saxophones_x.png'); 
	background-repeat: repeat-x, no-repeat, no-repeat, repeat-x; 
	background-size: 50px 180px, 400px 350px, 400px 350px, 180px 350px;
	background-position: 0px 0px, bottom left, bottom right, top right;
  }
  #infoX {
	font-family: Localfont, "Poppins", sans-serif; text-align:justify; font-size: 22px;font-weight: bold; color:darkgreen;  
  }
  #storesDisplay div div a img { /* stores icon */
	width:140px; height:70px;	
	margin:4px 4px 4px 4px;	
	border-radius: 15px;
  }    
  #welC1,#welC2,#welC3 {margin: 90px 0px 0px 0px;}
  #caption2 {width: 60%; max-width:500px;}
  #muCaseX,.trackCase {width:75%;border: 2px solid lime; padding:0px 0px 0px 0px; margin-left:calc((100% - 75%)/2)}
  #popLink {
	background-image: url('../img/bandset1.png');
	background-repeat: no-repeat;
	background-color: transparent;
	background-size: 200px Auto;
	background-position: top right;
	width:Auto; height:150px;	
	margin: 0px 0px 0px 340px; 
    background-color: #f2ffe6;
  }
  #advLink {
	  width: calc(100% - 550px);
	  min-width:calc(100% - 580px);
  }
  #mySidebar {
	background-position: bottom left, 140px 270px, bottom left, bottom center, bottom right, top left;
  }
}
@media screen and (min-width: 1600px) { /* screen 992px or more */
  #home {
    background-image: url('../img/piano1.png'), url('../img/piano1x.png'), url('../img/bandset1.png'), url('../img/header.png'), url('../img/Saxophones.png');
	background-repeat: no-repeat, no-repeat, no-repeat, repeat-x, repeat-x;
	background-color: transparent;
	background-size: 350px 300px, 350px 300px, 300px Auto, 440px 90px, 100px Auto;
	background-position: top right, top left, top center, 0px 0px, top left;
	margin: 0px 0px 0px 300px; 
  }
  #welC1,#welC2,#welC3 {margin: 90px 0px 0px 330px;}
}