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

/* Font Faces */
@font-face {
    font-family: 'Myriad Pro';
    src: url('../font/MyriadPro-Regular.eot');
    src: url('../font/MyriadPro-Regular.eot?#iefix') format('embedded-opentype'),
        url('../font/MyriadPro-Regular.woff2') format('woff2'),
        url('../font/MyriadPro-Regular.woff2') format('woff2'),
        url('../font/MyriadPro-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../font/MyriadPro-SemiboldIt.eot');
    src: url('../font/MyriadPro-SemiboldIt.eot?#iefix') format('embedded-opentype'),
        url('../font/MyriadPro-SemiboldIt.woff2') format('woff2'),
        url('../font/MyriadPro-SemiboldIt.woff') format('woff');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../font/MyriadPro-BlackIt.eot');
    src: url('../font/MyriadPro-BlackIt.eot?#iefix') format('embedded-opentype'),
        url('../font/MyriadPro-BlackIt.woff2') format('woff2'),
        url('../font/MyriadPro-BlackIt.woff') format('woff');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../font/MyriadPro-Bold.eot');
    src: url('../font/MyriadPro-Bold.eot?#iefix') format('embedded-opentype'),
        url('../font/MyriadPro-Bold.woff2') format('woff2'),
        url('../font/MyriadPro-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../font/MyriadPro-LightIt.eot');
    src: url('../font/MyriadPro-LightIt.eot?#iefix') format('embedded-opentype'),
        url('../font/MyriadPro-LightIt.woff2') format('woff2'),
        url('../font/MyriadPro-LightIt.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../font/MyriadPro-Cond.eot');
    src: url('../font/MyriadPro-Cond.eot?#iefix') format('embedded-opentype'),
        url('../font/MyriadPro-Cond.woff2') format('woff2'),
        url('../font/MyriadPro-Cond.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../font/MyriadPro-Semibold.eot');
    src: url('../font/MyriadPro-Semibold.eot?#iefix') format('embedded-opentype'),
        url('../font/MyriadPro-Semibold.woff2') format('woff2'),
        url('../font/MyriadPro-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../font/MyriadPro-Light.eot');
    src: url('../font/MyriadPro-Light.eot?#iefix') format('embedded-opentype'),
        url('../font/MyriadPro-Light.woff2') format('woff2'),
        url('../font/MyriadPro-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../font/MyriadPro-BoldCond.eot');
    src: url('../font/MyriadPro-BoldCond.eot?#iefix') format('embedded-opentype'),
        url('../font/MyriadPro-BoldCond.woff2') format('woff2'),
        url('../font/MyriadPro-BoldCond.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../font/MyriadPro-Black.eot');
    src: url('../font/MyriadPro-Black.eot?#iefix') format('embedded-opentype'),
        url('../font/MyriadPro-Black.woff2') format('woff2'),
        url('../font/MyriadPro-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../font/MyriadPro-BoldCondIt.eot');
    src: url('../font/MyriadPro-BoldCondIt.eot?#iefix') format('embedded-opentype'),
        url('../font/MyriadPro-BoldCondIt.woff2') format('woff2'),
        url('../font/MyriadPro-BoldCondIt.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../font/MyriadPro-BoldIt.eot');
    src: url('../font/MyriadPro-BoldIt.eot?#iefix') format('embedded-opentype'),
        url('../font/MyriadPro-BoldIt.woff2') format('woff2'),
        url('../font/MyriadPro-BoldIt.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../font/MyriadPro-CondIt.eot');
    src: url('../font/MyriadPro-CondIt.eot?#iefix') format('embedded-opentype'),
        url('../font/MyriadPro-CondIt.woff2') format('woff2'),
        url('../font/MyriadPro-CondIt.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}
/* Email */
.demoInputBox{padding:10px; border:#F0F0F0 1px solid; border-radius:4px;}
.error{font-family:Arial, Helvetica, sans-serif; color:#F00; font-size:22px; text-align:center;}
.success{font-family:Arial, Helvetica, sans-serif; color:#000; font-size:22px; text-align:center;}
.info{font-size:.8em;color: #FF6600;letter-spacing:2px;padding-left:5px;}
.btnAction{background-color:#000;border:0;padding:10px 40px;color:#FFF;border:#F0F0F0 1px solid; border-radius:4px;}
/* Social Media */
#socialmedia{
	position:absolute;
	margin-top:50px;
	margin-left:0px;
	width:82px;
	z-index:10000000;
}
#socialmediaBtn{
	background-color:#ecb326;
	opacity:.75;
	float:left;
}
#socialmediadivide{
	height:1px;  
	background-color:#D3681F; 
	width:100%
}
#slideout {
	position:absolute;
	top: 0px;
	left: 0;
	width: 100px;
	padding: 12px 0;
	text-align: center;
	background: #000;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px ;
	border-radius: 0 0 5px 5px;
	height: -24px;
}
#slideout_inner {
    position:absolute;
    top: -41px;
    left:0px;
    width: 200px;
    -webkit-transition-duration: 20s;
    -moz-transition-duration: 20s;
    transition-duration: 20s;
    -o-transition-duration: 20s;
    text-align: left;
    -webkit-border-radius: 0 0 0 0;
    -moz-border-radius: 0 0 0 0;
    border-radius: 0 0 0 0;
	visibility:hidden;
	opacity: 0;
                  transition: opacity .55s ease-in-out;
                  -moz-transition: opacity .55s ease-in-out;
                  -webkit-transition: opacity .55s ease-in-out;
}
#slideout_inner textarea {
    width: 200px;
    height: 48px;
    margin-bottom: 6px;
}
#slideout:hover {
    top: 41px;
}
#slideout:hover #slideout_inner {
    top:-41px;
	visibility:visible;
	opacity: .75;
                  transition: opacity .6s ease-in-out;
                  -moz-transition: opacity .6s ease-in-out;
                  -webkit-transition: opacity .6s ease-in-out;
	
}


/* Main Css */

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
/* Full Screen CPU */


#navi{
	position:relative;
}
.current{
	  font-size: 20px;
  color:#f2dee5;
  border-bottom:#292829 solid 1px;

}
/* Hover Line*/
.navi {
  font-size: 20px;
  font-weight: normal;
    color:#67009e;

}
.navi > a {
  text-decoration: none;
  color:#292829;
  z-index: 10000;
 /* text-shadow: 1px 1px 4px #ac28f3; */
}
.navi > a:hover {
  text-decoration: none;
   color:#fff;
  z-index: 10000;
  text-shadow: 1px 1px 2px #6e6b6f;
 /* text-shadow: 1px 1px 4px #ac28f3; */
}


.navi > a:before {
  content: "";
  position: absolute;
  width:100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background: #f2dee5;
  visibility: hidden;
  border-radius: 5px;
  transform: scaleX(0);
  transition: .25s linear;
    text-shadow: 0px 0px 0px #67009e;
}
.navi > a:hover:before,
.navi > a:focus:before {
  visibility: visible;
  transform: scaleX(1);
  
}
/* End */
@media only screen and (min-width: 1001px) {
.btnContainer{
	width:1050px;
	margin-left:auto;
	margin-right:auto;
}
.btnNav{
	float:right;
	display:block;
	padding-left:10px;
	padding-right:10px;
	height:40px;
}
}

@media only screen and (max-width: 1000px) {

.btnContainer{
	width:768px;
	margin-left:auto;
	margin-right:auto;
}
.btnNav{
	float:right;
	display:block;
	padding-left:10px;
	padding-right:10px;
	height:40px;
}
}
@media only screen and (max-width: 767px) {
.btnContainer{
	width:350px;
	margin-left:auto;
	margin-right:auto;
}
.btnNav{
	float:right;
	display:block;
	padding-left:5px;
	padding-right:5px;
	height:40px;
}

}

/*Back to Top Button */
#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 50px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 100000000000; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: red; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */

}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

/* Desktop Nav */
       
header{
	
            position: fixed;
            font-size: 18px;
            line-height: 48px;
            height: 48px; 
            width: 100vw;
			 background: rgba(236, 179, 38, 0.75);
            /* background: #e2837d; //DBBBB3 */
            text-align: center;
            padding-right: 110px;
			top:0px;
			z-index:10000;
        }


/* Large Screen */

@media only screen and (min-width: 1001px) {
.sectionContainer{
	width:1050px; 
	margin-left:auto; 
	margin-right:auto;
}
#headerContainer{
	position:relative; width:1050px; margin-left:auto; margin-right:auto;
}
/* backgrounds */
.aboutBg{
	width:100vw;
		background:url(../images/aboutBG.jpg) top center;
	background-size:cover;

}
.liveBg{
	width:100vw;
		background:url(../images/IC_live.jpg) top center;
	background-size:cover;

}
.serviceBg{
	width:100vw;
		background:url(../images/serviceBG.jpg) top center;
	background-size:cover;

}
.contactBg{
	background:url(../images/contactBG.jpg) no-repeat center center fixed;
	background-size:cover;
	width:100vw;
	
}
.liveContent{
	float:left; width:318px; padding-left:50px; padding-right:50px; padding-top:80px;
}
.liveVideo{
	float:left; 
	width:600px; 
	height:472px; 
	background-image:url(../images/videoShadow.png); 
	padding-top:90px; 
	padding-left:25px;
}

.youtubeBtn{
	float:left; 
	width:222px; 
	padding-left:15px;
}
.play{
	float:left; 
	width:77px;
	height:54px;
	background-image:url(../images/youtubeBtn.png);
	background-size:cover;
}
.yellowDivide{
	background-color:#eab227;
	width:80%; 
	margin-left:10%;
	margin-right:10%;
	margin-top:30px;
	margin-bottom:30px;
	height:1px;
}
.serviceContainer{
	height:674px; 
	width:1050px;
}
.serviceImgs{
	width:608px; 
	padding-top:30px; 
	float:left;
}
.img1{
	float:left; 
	width:284px; 
	height:222px; 
	margin:10px;
	background-image:url(../images/serviceImg1.png);
	background-size:cover;
}
.img2{
	float:left; 
	width:284px; 
	height:222px; 
	margin:10px;
	background-image:url(../images/serviceImg2.png);
	background-size:cover;
}
.img3{
	float:left; 
	width:284px; 
	height:222px; 
	margin:10px;
	background-image:url(../images/serviceImg3.png);
	background-size:cover;
}
.img4{
	float:left; 
	width:284px; 
	height:222px; 
	margin:10px;
	background-image:url(../images/serviceImg4.png);
	background-size:cover;
}
.serviceDescTitle{
	float:left; 
	width:220px;
	}
.yellowHorDivide{
	float:left; 
	width:2px; 
	margin-top:60px; 
	margin-left:10px; 
	margin-right:10px; 
	background-color:#eab227; 
	height:450px;
}
.serviceDesc{
	float:left; 
	width:200px;
}
.padding1{
	padding-top:80px
}
.padding2{
	padding-top:70px
}
.padding3{
	padding-top:60px
}
.padding4{
	padding-top:50px
}
.subTitle{
	text-align:right;
	color:#000;
	 font-family: 'Myriad Pro';
	font-size:28px;
	letter-spacing:1px;
	font-weight:bold;

}
.discography{
	  
	background-position:center top; 
	background-size:cover;
}
.discographyContainer{
	width:100%; 
	margin-left:auto; 
	margin-right:auto; 
	height:119px;
}
.discArrow{
	width:657px;
	height:119px ; 
	background-image:url(../images/Discography_arrow.png);
    display: block;
}
.discTitle{
	font-family:Arial, Helvetica, sans-serif; font-size:52px; 
	font-weight:bold; 
	letter-spacing:-4px; 
	padding-left:120px; 
	padding-top:20px;
}
.discPadding{
	padding-left:120px;
}
.contactInfo{
	padding-left:50px; 
	padding-right:50px; 
	padding-bottom:30px; 
	float:left; width:300px;
}
.contactInfo{
	padding-left:50px; 
	padding-right:50px; 
	padding-bottom:30px; 
	float:left; width:300px;
}
.contactForm{
	float:left; 
	width:650px;
}
.contactTextArea{
	float:left;
	width:430px;
}
.contactFields{
	float:left; 
	width:200px;
}
.contactInfo{
	padding-left:50px; 
	padding-right:20px;  
	width:330px;
}

.formBtn{
	float:right;
	padding-right:100px;
	padding-top:20px;
}
.staff{
	float:left; width:410px;
}
.staffArrow{
	width:640px; 
	height:220px ; 
	background-image:url(../images/ExecutiveArrow.png); 
	float:left;
}
.staffBG{
	width:1050px; 
	margin-left:auto; 
	margin-right:auto; 
	height:220px; 
	background-image:url(../images/yellowStripe.png);
}
.staffContainer{
	background-image:url(../images/yellowStripeBG.png); 
	background-position:center top;
}
.staffTitle{
font-family:Arial, Helvetica, sans-serif; 
	font-size:36px;
	font-weight:bold; 
	padding-left:120px;
	padding-top:70px;
}
.paddingStaff{
	padding-top:30px;
}
#float{

}
.footerTitle{
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
	font-weight:bold;
}
}

/* Medium Screen */

@media only screen and (max-width: 1000px) {
	.sectionContainer{
	width:768px; 
	margin-left:auto; 
	margin-right:auto;
}
#headerContainer{
	position:relative; width:768px; margin-left:auto; margin-right:auto;
}
/* backgrounds */
.aboutBg{
	width:100vw;
		background:url(../images/aboutBG.jpg) right center;
	background-size:cover;

}
.liveBg{
	width:100vw;
		background:url(../images/IC_live.jpg) top center;
	background-size:cover;

}
.serviceBg{
	width:100vw;
		background:url(../images/serviceBG.jpg) top center;
	background-size:cover;

}
.contactBg{
	background:url(../images/contactBG.jpg) no-repeat center center fixed;
	background-size:cover;
	width:100vw;
	
}
.liveContent{
	float:left; width:308px; padding-left:50px; padding-right:10px; padding-top:20px;
}
.liveVideo{
	float:left;
	width:400px; 
	height:230px; 
	background-image:url(../images/videoShadow.png);
	background-repeat:no-repeat;
	background-size: 85%;
	background-position: 15px 45px;
	padding-top:70px; 
}
.vidMeasurements{
	width:400px;
	height:210px;
}
.youtubeBtn{
	float:left; 
	width:222px; 
	padding-left:5px;
	padding-bottom:20px;
}
.play{
	float:left; 
	width:77px;
	height:54px;
	background-image:url(../images/youtubeBtn.png);
	background-size:cover;
}
.yellowDivide{
	background-color:#eab227;
	width:80%; 
	margin-left:10%;
	margin-right:10%;
	margin-top:10px;
	margin-bottom:10px;
	height:1px;
}
.serviceContainer{
	width:768px;
	padding-bottom:20px;
}
.serviceImgs{
	width:420px; 
	padding-top:30px; 
	float:left;
}
.img1{
	float:left; 
	width:200px; 
	height:156px;   
	margin:5px;
	background-image:url(../images/serviceImg1.png);
	background-size:cover;
}
.img2{
	float:left; 
	width:200px; 
	height:156px;   
	margin:5px;
	background-image:url(../images/serviceImg2.png);
	background-size:cover;
}
.img3{
	float:left; 
	width:200px; 
	height:156px;   
	margin:5px;
	background-image:url(../images/serviceImg3.png);
	background-size:cover;
}
.img4{
	float:left; 
	width:200px; 
	height:156px;    
	margin:5px;
	background-image:url(../images/serviceImg4.png);
	background-size:cover;
}
.serviceDescTitle{
	float:left; 
	width:103px;
	}
.yellowHorDivide{
	float:left; 
	width:2px; 
	margin-top:20px; 
	margin-left:5px; 
	margin-right:5px; 
	background-color:#eab227; 
	height:365px;
}
.serviceDesc{
	float:left; 
	width:232px;
}
.padding1{
	padding-top:40px
}
.padding2{
	padding-top:40px
}
.padding3{
	padding-top:40px
}
.padding4{
	padding-top:40px
}
.subTitle{
	text-align:right;
	color:#000;
	 font-family: 'Myriad Pro';
	font-size:18px;
	letter-spacing:1px;
	font-weight:bold;

}
.discography{

	background-position:center top; 
	background-size:cover;
}
.discographyContainer{
	width:768px; 
	margin-left:auto; 
	margin-right:auto; 
	height:119px;
}
.discArrow{
	width:657px;
	height:119px ; 
	background-image:url(../images/Discography_arrow.png);
	background-position: -125px 0px;
	background-repeat:no-repeat;
}
.discTitle{
	font-family:Arial, Helvetica, sans-serif; font-size:52px; 
	font-weight:bold; 
	letter-spacing:-4px; 
	padding-left:80px; 
	padding-top:20px;
}
.discPadding{
	padding-left:80px;
}
.contactInfo{
	padding-left:50px; 
	padding-bottom:30px; 
	float:left; 
	width:245px;
}
.contactForm{
	float:left; 
	width:473px;
}
.contactTextArea{
	float:left;
	width:230px;
}
.contactFields{
	float:left; 
	width:188px;
}
.formBtn{
	float:right;
	padding-right:100px;
	padding-top:20px;
}
.staff{
	float:left; 
	width:328px;
}
.staffArrow{
	width:440px; 
	height:220px ; 
	background-image:url(../images/ExecutiveArrow.png); 
	float:left;
	background-position: -200px 0px;
	background-repeat:no-repeat;
}
.staffBG{
	width:768px; 
	margin-left:auto; 
	margin-right:auto; 
	height:220px; 
	background-image:url(../images/yellowStripe.png);
	background-position: -200px 0px;
	background-repeat:no-repeat;
}
.staffContainer{

	
}
.staffTitle{
	font-family:Arial, Helvetica, sans-serif; 
	font-size:36px;
	font-weight:bold; 
	padding-left:50px;
	padding-top:70px;
}
.paddingStaff{
	padding-top:25px;
}
#float{

}
.footerTitle{
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
	font-weight:bold;
}
}


/* SmallScreen */

@media only screen and (max-width: 767px) {
	.sectionContainer{
	width:350px; 
	margin-left:auto; 
	margin-right:auto;
}
#headerContainer{
	position:relative; width:350px; margin-left:auto; margin-right:auto;
}
/* backgrounds */
.aboutBg{
	width:100vw;
		background:url(../images/aboutBG.jpg) right center;
	background-size:cover;

}
.liveBg{
	width:100vw;
		background:url(../images/IC_live.jpg) middle left;
	background-size:cover;

}
.serviceBg{
	width:100vw;
		background:url(../images/serviceBG.jpg) top center;
	background-size:cover;

}
.contactBg{
	background:url(../images/contactBG.jpg) no-repeat center center fixed;
	background-size:cover;
	width:100vw;
	
}
.liveContent{
 width:340px; padding-left:5px; padding-right:5px; padding-top:30px;
}
.liveVideo{
	float:left; 
	width:300px; 
	background-image:url(../images/videoShadow.png); 
	background-image:url(../images/videoShadow.png);
	background-repeat:no-repeat;
	background-size: 85%;
	background-position: 15px 25px;
	padding-top:20px; 
}
.vidMeasurements{
	width:300px;
	height:158px;
}
.youtubeBtn{
	float:left; 
	width:222px; 
	padding-left:5px;
}
.play{
	float:left; 
	width:77px;
	height:54px;
	background-image:url(../images/youtubeBtn.png);
	background-size:cover;
}
.yellowDivide{
	background-color:#eab227;
	width:80%; 
	margin-left:10%;
	margin-right:10%;
	margin-top:30px;
	margin-bottom:30px;
	height:1px;
}
.serviceContainer{
	height:674px; 
	width:1050px;
}
.serviceImgs{
	width:608px; 
	padding-top:30px; 
	float:left;
}
.img1{
	float:left; 
	width:284px; 
	height:222px; 
	margin:10px;
	background-image:url(../images/serviceImg1.png);
	background-size:cover;
}
.img2{
	float:left; 
	width:284px; 
	height:222px; 
	margin:10px;
	background-image:url(../images/serviceImg2.png);
	background-size:cover;
}
.img3{
	float:left; 
	width:284px; 
	height:222px; 
	margin:10px;
	background-image:url(../images/serviceImg3.png);
	background-size:cover;
}
.img4{
	float:left; 
	width:284px; 
	height:222px; 
	margin:10px;
	background-image:url(../images/serviceImg4.png);
	background-size:cover;
}
.serviceDescTitle{
	float:left; 
	width:220px;
	}
.yellowHorDivide{
	float:left; 
	width:2px; 
	margin-top:60px; 
	margin-left:10px; 
	margin-right:10px; 
	background-color:#eab227; 
	height:450px;
}
.serviceContainer{
	width:350px;
	padding-bottom:40px;
}
.serviceImgs{
	width:420px; 
	padding-top:30px; 
	float:left;
}
.img1{
	float:left; 
	width:150px; 
	height:117px;   
	margin:5px;
	background-image:url(../images/serviceImg1.png);
	background-size:cover;
}
.img2{
	float:left; 
	width:150px; 
	height:117px;     
	margin:5px;
	background-image:url(../images/serviceImg2.png);
	background-size:cover;
}
.img3{
	float:left; 
	width:150px; 
	height:117px;   
	margin:5px;
	background-image:url(../images/serviceImg3.png);
	background-size:cover;
}
.img4{
	float:left; 
	width:150px; 
	height:117px;     
	margin:5px;
	background-image:url(../images/serviceImg4.png);
	background-size:cover;
}
.serviceDescTitle{
	float:left; 
	width:103px;
	}
.yellowHorDivide{
	float:left; 
	width:2px; 
	margin-top:20px; 
	margin-left:5px; 
	margin-right:5px; 
	background-color:#eab227; 
	height:365px;
}
.serviceDesc{
	float:left; 
	width:232px;
}
.padding1{
	padding-top:40px
}
.padding2{
	padding-top:40px
}
.padding3{
	padding-top:40px
}
.padding4{
	padding-top:40px
}
.subTitle{
	text-align:right;
	color:#000;
	 font-family: 'Myriad Pro';
	font-size:18px;
	letter-spacing:1px;
	font-weight:bold;

}
.discography{

	background-position:center top; 
	background-size:cover;
}
.discographyContainer{
	width:350px; 
	margin-left:auto; 
	margin-right:auto; 
	height:119px;
}
.discArrow{
	width:350px;
	height:119px; 
	background-image:url(../images/Discography_arrow.png);
	background-position:right;
}
.discTitle{
	font-family:Arial, Helvetica, sans-serif; font-size:52px; 
	font-weight:bold; 
	letter-spacing:-4px; 
	padding-left:10px; 
	padding-top:20px;
}
.discPadding{
	padding-left:10px;
}
.contactInfo{
	padding-left:10px; 
	padding-right:10px;  
	width:330px;
}
.contactForm{ 
	width:350px;
}
.contactTextArea{
	width:350px;
}
.contactFields{
	width:350px;
}
.formBtn{
	float:right;
	padding-right:100px;
	padding-top:20px;
}
.staff{
	float:left; 
	width:350px;
}
.staffArrow{
	width:275px; 
	height:220px ; 
	background-image:url(../images/ExecutiveArrow_sm.png); 
	float:left;	
	background-position: 0px 0px;
}
.staffBG{
	width:350px; 
	margin-left:auto; 
	margin-right:auto; 
	height:220px; 
	background-image:url(../images/yellowStripe.png);
}
.staffContainer{
	background-image:url(../images/yellowStripe_sm.png);
	background-position:center top;
	background-repeat:repeat-x;
	width:100vw;
	width:100%;
}
.staffTitle{
	font-family:Arial, Helvetica, sans-serif; 
	font-size:36px;
	font-weight:bold; 
	padding-left:10px;
	padding-right:30px;
	padding-top:20px;
}
.paddingStaff{
	padding-top:10px;
}
#float{
	float:left;
	width:175px;
}
.footerTitle{
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
	font-weight:bold;
}
}





/* clear floating Divs */
.clear{
	clear:both;
}

/* Copy styles */
.copy {
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
}
.footerCopy {
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
}
.copyLine {
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
	line-height:24px;
}

.TitleAbout {
	font-size: 32px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;

	font-variant:small-caps;
}
.formText {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: right;
	font-weight: bold;
}


.headerCopy{
	position:absolute;
	bottom:80px;
	width:100vw;
}
.WhiteOverlay{
	background: rgba(255,255, 255, 0.35);
}
.yellowOverlay{
	    background: rgba(236, 179, 138, 0.75);
		box-shadow: 5px 5px 15px grey;
}
.boxCopy{
	font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#000000;
	text-align:center;
	  text-shadow: 2px 2px 4px #000000;
}

.myriad{
	font-family: "Myriad Pro";
	font-weight: normal;
	font-style: normal;
}
h1{
	font-size:52px;
	color:#40065f;
}
h2{
	font-size:52px;
	color:#fff;
}

.subTitleML{
	text-align:left;
	color:#000;
	 font-family: 'Myriad Pro';
	font-size:24px;

}	
.subTitleWht{
	text-align:left;
	color:#fff;
	 font-family: 'Myriad Pro';
	font-size:32px;
	font-variant:small-caps;

}	
.subTitleSm{
	color:#000;
	 font-family: 'Myriad Pro';
	font-size:16px;
	font-weight:bold;
	text-transform:uppercase;
	text-decoration:none;

}	
.subTitleSm a:link{
	color:#000;
	 font-family: 'Myriad Pro';
	font-size:16px;
	font-weight:bold;
	text-transform:uppercase;
	text-decoration:none;

}	
.subTitleSm a:visited{
	color:#000;
	 font-family: 'Myriad Pro';
	font-size:16px;
	font-weight:bold;
	text-transform:uppercase;
	text-decoration:none;

}	
.subTitleSm a:hover {
	color:#000;
	 font-family: 'Myriad Pro';
	font-size:16px;
	font-weight:bold;
	text-transform:uppercase;
	text-decoration:underline;

}	
.subTitleSm a:active {
	color:#000;
	 font-family: 'Myriad Pro';
	font-size:16px;
	font-weight:bold;
	text-transform:uppercase;
	text-decoration:none;

}	
.subTitleSmWht{
	color:#fff;
	 font-family: 'Myriad Pro';
	font-size:16px;

}
@media only screen and (min-width: 1001px) {
	#aboutImg{
	float:left;
	width:481px;
	margin-top:-30px;
	padding-bottom:50px;
	padding-right:50px;
	opacity:0;
}
.sm{
	display:none;
	visibility:hidden;
}
.lrg{
	display:block;
	visibility:visible;
}
#aboutSection{
	float:left;
	width:394px;
	padding-left:125px;
	padding-top:80px;
}
}
@media only screen and (max-width: 1000px) {
#aboutImg{
	float:left;
	width:350px;
	margin-top:-30px;
	padding-bottom:50px;
	opacity:0;
}
.sm{
	display:block;
	visibility:visible;
}
.lrg{
	display:none;
	visibility:hidden;
}
#aboutSection{
	float:left;
	width:358px;
	padding-left:10px;
	padding-top:10px;
}
}
@media only screen and (max-width: 768px) {
#aboutImg{
		text-align:center;
	width:350px;
	margin-top:-30px;
	padding-bottom:50px;
	padding-right:50px;
	opacity:0;
}
.sm{
	display:block;
	visibility:visible;
}
.lrg{
	display:none;
	visibility:hidden;
}
#aboutSection{
	width:350px;
}
}


.hideImg{
	opacity:0;
		 }

/* Down Arrouw */
.arrow {
	position:absolute;
	bottom:50px;
  box-sizing: border-box;
  height: 3vw;
  width: 3vw;
  border-style: solid;
  border-color: white;
  border-width: 0px 1px 1px 0px;
  transform: rotate(45deg);
  transition: border-width 150ms ease-in-out;
  left:49%;
    display: block;
}

.arrow:hover {
  border-bottom-width: 4px;
  border-right-width: 4px;
  bottom:45px;
}

@media only screen and (max-width: 768px) {
    /* Down Arrouw */
.arrow {
 display: none;
}

.arrow:hover {

}
}

/* Back to Top */
#toTop {
    position: fixed;
    bottom: 15px;
    right: 15px;
    display: none;
	background-image:url(../images/backtotop.jpg);
	width:50px;
	height:50px;
}
#toTop:hover {

	background-image:url(../images/backtotop_hover.jpg);

}





.content { float: left;  padding: 2% 2% 2%; width: 96%; text-align:left; }
.clear{
		clear:both;
}

.copym {
	font-size: 12px;
	font-family:Arial, Helvetica, sans-serif;
	line-height:normal;
}

.copym a:link{
	font-size: 12px;
	font-family:Arial, Helvetica, sans-serif;
	line-height:normal;
	color:#000;
}
.copym a:visited{
	font-size: 12px;
	font-family:Arial, Helvetica, sans-serif;
	line-height:normal;
	color:#000;
}
.copym a:hover{
	font-size: 12px;
	font-family:Arial, Helvetica, sans-serif;
	line-height:normal;
	color:#000;
	text-decoration:none;
}
.copym a:active{
	font-size: 12px;
	font-family:Arial, Helvetica, sans-serif;
	line-height:normal;
	color:#000;
	
}
.err{
	font-size: 9px;
	font-family:Arial, Helvetica, sans-serif;
	line-height:normal;
	color:#000;
}


/* Image Hover */

.image{
 width:150px;
 height:150px;
    
}
.overlay2{
 width:100%;
 height:100%;
display:none;
    position:absolute;
    top:0px;
    left:0px;
}
.overlay2 div {
    position:relative;
    display:inline-block;
    top:50%;
    margin:-50% 5px 0 0;
}

#divImage { position:relative;display:inline-block; width:150;height:150px;}
#divImage:hover .overlay2 {
    display:block;
    background-image:url(../images/IMG1_overlay.png);
 -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.ImageHoverTitle {
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
	font-size: 18px;
	text-align: center;
	text-transform:uppercase;
}

.ImageHovertext {
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
	font-size: 14px;
	text-align: center;
	text-align:justify;
}
.ImageContent{

}
audio { width: 650px; display: block; margin-left:auto; margin-right:auto;}


/* =========================================================
   Clean Responsive Template Additions (ICG)
   Notes:
   - Keep your existing styles above.
   - New/clean blocks are grouped by section.
   - Media queries live at the bottom for predictability.
   ========================================================= */

/* --- Base utilities --- */
.container { width: 1050px; margin-left:auto; margin-right:auto; }
@media (max-width: 1100px){ .container{ width: 92%; } }

.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  border:0;
}

/* Buttons */
.btn{
  display:inline-block;
  border:0;
  cursor:pointer;
  text-decoration:none;
  font-weight:bold;
}
.btn-primary{
  background:#111;
  color:#fff;
  padding:14px 22px;
  border-radius:4px;
}
.btn-primary:hover{ opacity:.9; }
.btn-buy{
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.35);
  padding:10px 14px;
  border-radius:3px;
}
.btn-buy:hover{ border-color:rgba(255,255,255,.75); }

/* =========================================================
   Discography (banner + slide-down panel)
   ========================================================= */
.section-discography{ position:relative; }
.discography-banner{
  width:100%;
  border:0;
  padding:0;
  text-align:left;
  cursor:pointer;
  background:transparent;
}
.discography-banner-bg{
  display:block;
  background-image:url('../images/DiscographyBg.jpg');
  background-position:center top;
  background-size:cover;
  height:119px;
}
.discography-banner-inner{
  position:absolute;
  left:0; right:0;
  top:0;
  height:119px;
  display:flex;
  align-items:center;
}
.discography-arrow{
  width:657px;
  height:119px;
  background-image:url('../images/Discography_arrow.png');
  background-repeat:no-repeat;

}
.discography-title{
  display:block;
  font-family:Arial, Helvetica, sans-serif;
  font-size:52px;
  font-weight:bold;
  letter-spacing:-4px;
  padding-left:120px;
  padding-top:20px;
  color:#111;
}
.discography-subtitle{
  display:block;
  padding-left:120px;
  margin-top:-4px;
  color:#111;
  font-family:Arial, Helvetica, sans-serif;
  font-size:13px;
}

/* Panel */
.discography-panel{
  /* Textured graphite background (softer than pure black) */


  padding:44px 0 54px;
}

/* Shell: stage centered, nav buttons float on the sides (like "off to the sides") */
.discography-shell{
  position:relative;
  padding:0 74px; /* room for side nav */
}
.discography-stage{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:26px;
  align-items:start;
}

/* Side nav buttons */
.discography-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:64px;
  height:64px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:56px;
  line-height:56px;
  cursor:pointer;
  opacity:.45;
}
.discography-nav:hover{ opacity:1; background:rgba(255,255,255,.10); }
.discography-prev{ left:0; }
.discography-next{ right:0; }

/* Album mock (cover + disc peeking out behind) */
.discography-album{
  display:flex;
  gap:18px;
  align-items:flex-start;
}
.discography-cd{
  position:relative;
  width:240px;
  min-width:240px;
  height:240px;
}

/* Textured gray cover + subtle frame (closer to your reference) */
.cd-cover{
  position:relative;
  width:240px;
  height:240px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.10) 0, rgba(255,255,255,0) 45%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, rgba(0,0,0,0) 2px 8px),
    linear-gradient(180deg, #3a3a3a 0%, #1f1f1f 100%);
  background-size:cover;
  background-position:center;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 14px 30px rgba(0,0,0,.55),
    inset 0 0 0 8px rgba(0,0,0,.28);
  z-index:2;
}
.cd-cover:before{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(255,255,255,.10);
  pointer-events:none;
}
.cd-cover.has-image{
  /* When JS injects a cover image, we keep the frame/texture on top via ::after */
  background-size:cover;
  background-position:center;
}
.cd-cover:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.10) 0, rgba(255,255,255,0) 45%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, rgba(0,0,0,0) 2px 8px);
  mix-blend-mode:overlay;
  opacity:.35;
  pointer-events:none;
}

/* Disc behind cover */
.cd-disc{
  position:absolute;
  right:-76px;
  top:22px;
  width:196px;
  height:196px;
  border-radius:50%;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.12) 0 3px, transparent 4px),
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.12) 0, rgba(255,255,255,0) 52%),
    repeating-radial-gradient(circle at center, rgba(255,255,255,.18) 0 1px, rgba(255,255,255,0) 2px 7px),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  opacity:.18;
  z-index:1;
}

/* Titles + CTA */
.discography-meta{ padding-top:10px; }
.discography-artist{
  margin:0;
  font-size:28px;
  letter-spacing:1px;
  text-transform:uppercase;
}
.discography-album-title{
  margin:8px 0 14px;
  opacity:.85;
}
.discography-actions{ margin-top:10px; }

/* Player (tracklist + audio) */
.discography-player{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  padding:16px;
}
.discography-player audio{ width:100%; }
.discography-tracks{
  margin:14px 0 0;
  padding-left:18px;
}
.track-btn{
  width:100%;
  text-align:left;
  background:transparent;
  border:0;
  color:#fff;
  cursor:pointer;
  padding:10px 10px;
  opacity:.78;
}
.track-btn:hover{ opacity:1; background:rgba(255,255,255,.06); }
.track-btn.is-active{ opacity:1; background:rgba(255,255,255,.10); }

/* Responsive */
@media (max-width: 900px){
  .discography-shell{ padding:0 56px; }
  .discography-stage{ grid-template-columns:1fr; }
  .discography-cd{ width:220px; min-width:220px; height:220px; }
  .cd-cover{ width:220px; height:220px; }
  .cd-disc{ width:180px; height:180px; right:-64px; top:20px; }
}
@media (max-width: 520px){
  .discography-shell{ padding:0 18px; }
  .discography-nav{ width:54px; height:54px; font-size:46px; line-height:46px; }
  .discography-prev{ left:-10px; }
  .discography-next{ right:-10px; }
  .discography-album{ flex-direction:column; }
  .discography-cd{ margin:0 auto; }
  .discography-meta{ text-align:center; }
}

/* =========================================================
   Gallery (simple responsive grid)
   ========================================================= */
.section-gallery{
  padding:46px 0;
  background:#f2f2f2;
}
.section-title{
  margin:0 0 18px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:28px;
  letter-spacing:-1px;
}
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.gallery-item{
  display:block;
  aspect-ratio: 1 / 1;
  background-size:cover;
  background-position:center;
  border-radius:6px;
  box-shadow:0 10px 18px rgba(0,0,0,.12);
  transform: translateZ(0);
}
.gallery-item:hover{ opacity:.92; }

/* =========================================================
   Contact form (matches the JPG layout)
   ========================================================= */
.form-status{
  padding:12px 14px;
  margin:0 0 14px;
  border-radius:6px;
  font-family:Arial, Helvetica, sans-serif;
}
.form-status--success{ background:#e7f6ea; color:#0b5a1a; }
.form-status--error{ background:#fde8e8; color:#7a0b0b; }

.contact-form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
.contact-form-col input,
.contact-form-col textarea{
  width:100%;
  box-sizing:border-box;
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.25);
  border-radius:3px;
  outline:none;
}
.contact-form-col textarea{
  min-height:120px;
  resize:vertical;
  margin-bottom:12px;
}

/* =========================================================
   Responsive breakpoints
   ========================================================= */
@media (max-width: 900px){
  .discography-stage{ grid-template-columns: 1fr; }
  .discography-nav{ width:44px; font-size:44px; }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  .contact-form-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  .discography-title{ font-size:40px; padding-left:110px; }
  .gallery-grid{ grid-template-columns: 1fr; }
  .discography-cd{ width:200px; min-width:200px; height:200px; }
  .cd-cover{ width:200px; height:200px; }
  .cd-disc{ width:170px; height:170px; right:-60px; }
    .discography-arrow{
  width:350px; 
  height:119px;
  background-image:url('../images/Discography_arrow.png');
        background-position: top left;
  background-repeat:no-repeat;

}
}



/* =========================================================
   Modern fixes / overrides (added during cleanup)
   Goal: preserve existing design but make it responsive + fix mobile nav.
   ========================================================= */

/* Make images responsive by default */
img { max-width: 100%; height: auto; }

/* Ensure the top header wrapper can shrink on small screens */
header > div { max-width: 1050px; width: 100%; margin-left: auto; margin-right: auto; padding: 0 16px; box-sizing: border-box; }

/* ---------- Desktop / Mobile nav ---------- */
.nav_slide_button.nav-toggle { display: none; } /* hidden on desktop */
.overlay-nav { 
  position: fixed; inset: 0; 
  background: rgba(0,0,0,0.92);
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.overlay-nav.open { opacity: 1; visibility: visible; }
.overlay-nav nav { height: 100%; display: flex; align-items: center; justify-content: center; }
.overlay-nav .navBtn { list-style: none; margin: 0; padding: 0; text-align: center; }
.overlay-nav .navBtn li { margin: 12px 0; }
.overlay-nav .navBtn a { 
  color: #fff; 
  text-decoration: none; 
  font-size: 22px;
  letter-spacing: 0.5px;
}
.overlay-nav .navBtn a:hover { opacity: .85; }

/* Hamburger button (uses existing anchor) */
.nav_slide_button.nav-toggle {
  width: 42px; height: 42px;
  position: fixed;
  top: 14px; right: 14px;
  z-index: 100000;
}
.nav_slide_button.nav-toggle span,
.nav_slide_button.nav-toggle span:before,
.nav_slide_button.nav-toggle span:after {
  display: block;
  position: absolute;
  left: 9px;
  right: 9px;
  height: 3px;
  background: #000;
  content: "";
  transition: transform .2s ease, top .2s ease, opacity .2s ease, background .2s ease;
}
.nav_slide_button.nav-toggle span { top: 20px; }
.nav_slide_button.nav-toggle span:before { top: -10px; }
.nav_slide_button.nav-toggle span:after { top: 10px; }

.nav_slide_button.nav-toggle.active span { background: transparent; }
.nav_slide_button.nav-toggle.active span:before { top: 0; transform: rotate(45deg); background:#fff; }
.nav_slide_button.nav-toggle.active span:after { top: 0; transform: rotate(-45deg); background:#fff; }

/* ---------- Discography: make banner + section feel "featured" ---------- */
.section-discography { padding: 0; }
.section-discography .discography-banner { position: relative; width: 100%; display: block; }
.section-discography .discography-banner-bg { position:absolute; inset:0; background: url(../images/DiscographyBg.jpg) no-repeat center center; background-size: cover; opacity: 1; }
.section-discography .discography-banner-inner { position: relative; max-width: 1050px; margin: 0 auto; padding: 18px 16px; box-sizing: border-box; }
.section-discography .discography-title { font-size: 46px; color:#000; font-style: italic; line-height: 1; }
.section-discography .discography-subtitle { font-size: 14px; color:#000; opacity: .85; margin-top: 4px; }
.section-discography .discography-rule { height: 1px; background: #f1a22a; }

.section-discography .discography-panel { background: #111; }
.section-discography .discography-panel .container { max-width: 1050px; width: 100%; margin: 0 auto; padding: 28px 16px; box-sizing: border-box; }

/* ---------- Scroll reveal (subtle) ---------- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Responsive rules ---------- */
@media (max-width: 1000px){
  /* show hamburger, hide desktop nav items */
  .btnContainer { display: none !important; }
  .nav_slide_button.nav-toggle { display: block; }

  /* reduce discography title size */
  .section-discography .discography-title { font-size: 36px; }
}

@media (max-width: 768px){
  /* prevent fixed widths from forcing horizontal scroll */
  body { overflow-x: hidden; }
  header > div { padding: 0 12px; }
  .section-discography .discography-title { font-size: 30px; }
  .overlay-nav .navBtn a { font-size: 20px; }
}


/* Fix legacy inline fixed-width wrappers (common in this project) */
div[style*="width:1050px"] { width: 100% !important; max-width: 1050px !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important; padding-left:16px; padding-right:16px; }
@media (max-width: 1000px){
  div[style*="width:1050px"] { padding-left:12px; padding-right:12px; }
}

/* Fade-in images: keep legacy "fade" class, but make it work without jQuery */

img.fade{transition: opacity 350ms ease; opacity:0;}
body.is-loaded img.fade{opacity:1;}

/* --- Foundation overrides (safe defaults) --- */
.reveal{opacity:1 !important; transform:none !important;}
html.js .reveal{opacity:1 !important;}
.reveal.is-visible{opacity:1 !important;}

/* Fluid container safety */
header > div[style*="width:1050px"]{max-width:1050px; width:100% !important; padding:0 16px; box-sizing:border-box;}
img{max-width:100%; height:auto;}
/* Prevent horizontal scroll from 100vw wrappers */
html, body{max-width:100%; overflow-x:hidden;}
/* Mobile responsiveness */
@media (max-width: 900px){
  .btnContainer{display:none !important;}
  .nav{display:block !important;}
  header > div[style*="width:1050px"]{padding:0 12px;}
}
@media (max-width: 600px){
  #Home{height:auto !important; min-height: 80vh;}
}



/* =========================================================
   DISCography — Modern Slider Stage (vanilla) 
   Imported from v35 discography module and scoped for stable1.
   Keeps the stable banner above.
   ========================================================= */

#Discography{

  background-position:center top;
  background-size:cover;
}

#Discography .discography{
  width:100%;
  padding:60px 0 80px;

}

#Discography .discography__stage{
  position:relative;
  max-width:820px;
  margin:0 auto;
  text-align:center;
}

#Discography .discography__viewport{ overflow:hidden; }
#Discography .discography__cover{ display:flex; justify-content:center; }
#Discography .discography__cover img{
  width:min(60vw, 360px);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
}

#Discography .discography__title{
  margin:18px 0 8px;
  color:#fff;
  font-size:28px;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}

#Discography .discography__desc{
  max-width:520px;
  margin:0 auto 16px;
  color:rgba(255,255,255,.92);
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}

#Discography .discography__player{
  margin:18px auto 0;
  max-width:620px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  padding:12px;
}

#Discography .discography__tracks{
  text-align:left;
  margin:12px 0 0;
  padding:0 0 0 22px;
  list-style:decimal;
}

#Discography .discography__tracks li{
  margin:8px 0;
  cursor:pointer;
  color:rgba(255,255,255,.9);
}

#Discography .discography__tracks li.is-active{
  color:#fff;
  font-weight:bold;
}

#Discography .discography__links{ margin-top:14px; }
#Discography .discography__link{
  color:#fff;
  text-decoration:none;
  font-weight:bold;
}
#Discography .discography__link:hover{ text-decoration:underline; }

/* arrows */
#Discography .discography__arrow{
  position:absolute;
  top:45%;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.22);
  cursor:pointer;
}
#Discography .discography__prev{ left:-70px; }
#Discography .discography__next{ right:-70px; }

#Discography .discography__arrow::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:0;
  height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
}
#Discography .discography__prev::before{ border-right:14px solid #fff; margin-left:-2px; }
#Discography .discography__next::before{ border-left:14px solid #fff; margin-left:2px; }

/* simple slide transition classes used by JS */
#Discography [data-track]{ transition: transform .28s ease, opacity .28s ease; }
#Discography [data-track].is-out-left{ transform: translateX(-18px); opacity:.0; }
#Discography [data-track].is-out-right{ transform: translateX(18px); opacity:.0; }

@media (max-width: 980px){
  #Discography .discography__prev{ left:10px; }
  #Discography .discography__next{ right:10px; }
}




/* --- Discography panel background: serviceBG variation (desktop + mobile) --- */
.section-discography .discography-panel,
.discography-panel{

}


/* =========================================================
   RESPONSIVE OVERRIDES (v2) — keep desktop approved look,
   allow fluid scaling + clean mobile breaks.
   Base design width: 1050px
========================================================= */

/* Core container should scale down from 1050 */
.inner{
  width: min(1050px, 100%);
}

/* --- LIVE: responsive video + stacking --- */
.liveContent, .liveVideo{ max-width: 100%; }

.vidMeasurements{
  width: 100%;
  max-width: 600px;
  height: auto;
  aspect-ratio: 16 / 9;
}
.vidMeasurements iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --- SERVICES: prep for responsive --- */
.serviceContainer{ width: min(1050px, 100%); height: auto; }

/* --- DISCOGRAPHY: allow banner hide on phones --- */
@media (max-width: 640px){
  .discography-banner-inner{ display: none !important; }
}

/* Tablet + below: stack major floated columns */
@media (max-width: 900px){

  /* About / Live / Services / Contact: stop floats */
  .aboutContainer, .liveContainer, .serviceContainer, .contactContainer{
    width: 100%;
    height: auto;
  }

  .aboutLeft, .aboutRight,
  .liveContent, .liveVideo,
  .serviceImgs, .serviceDescTitle, .yellowHorDivide, .serviceDesc,
  #contactInfo, #contactForm{
    float: none;
    width: 100%;
  }

  /* LIVE */
  .liveContent{
    padding: 50px 24px 20px 24px;
  }
  .liveVideo{
    background-image: none; /* shadow becomes too heavy on mobile */
    padding: 10px 24px 40px 24px;
    height: auto;
  }

  /* SERVICES: images first, then titles/copy */
  .serviceImgs{
    padding: 24px 0 10px 0;
  }
  .img1, .img2, .img3, .img4{
    float: none;
    width: min(92vw, 360px);
    margin: 12px auto;
    height: auto;
    aspect-ratio: 284 / 222;
    background-position: center;
  }

  .serviceDescTitle{
    text-align: center;
    padding: 10px 0 0 0;
  }
  .yellowHorDivide{
    width: 70%;
    height: 2px;
    margin: 20px auto;
  }
  .serviceDesc{
    width: min(92vw, 520px);
    margin: 0 auto;
    text-align: left;
  }

  /* CONTACT: form then copy under it */
  .contactContainer{
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 18px 40px 18px;
  }
  #contactForm{ order: 1; }
  #contactInfo{ order: 2; }

  #contactForm input, #contactForm textarea{
    width: 100% !important;
    box-sizing: border-box;
  }

  /* EXEC STAFF: title above names */
  .staffContainer, .staffBG{
    width: 100%;
    height: auto;
    background-size: cover;
  }
  .staffTitle{
    float: none;
    width: 100%;
    padding: 18px 18px 6px 18px;
  }
  .staff{
    float: none;
    width: 100%;
    padding: 0 18px 18px 18px;
  }
}

/* Small phones */
@media (max-width: 420px){
  .liveContent{ padding-left: 16px; padding-right: 16px; }
  .liveVideo{ padding-left: 16px; padding-right: 16px; }
  .img1, .img2, .img3, .img4{ width: 94vw; }
}


/* Ensure embedded youtube iframe scales */
.latestVideoEmbed{ width:100% !important; height:100% !important; display:block; }


/* =========================================================
   RESPONSIVE PATCHES (v3) — mobile polish per feedback
   - Services: 1-by-1 images + title/copy under each (mobile-only)
   - Discography: remove extra background image; make player fully fluid
   - Contact + Executive Staff: prevent overflow; stack cleanly
========================================================= */

.services-mobile{ display:none; }

/* Remove the extra DiscographyBg2 image layer (keep banner + panel bg) */
#Discography{
  background-image:none !important;
 
}

/* Make the audio player always fit its container */
#Discography audio{ width:100%; max-width:100%; display:block; }

@media (max-width: 900px){

  /* ---- SERVICES ---- */
  .services-desktop{ display:none; }
  .services-mobile{
    display:block;
    max-width: 1050px;
    margin: 0 auto;
    padding: 10px 16px 40px;
    box-sizing:border-box;
    position:relative;
  }
  .services-mobile-bar{
    position:absolute;
    right:18px;           /* keeps yellow bar off the edge */
    top: 140px;
    bottom: 28px;
    width: 2px;
    background: #eab227;
    opacity: .95;
  }
  .services-mobile-item{
    margin: 18px 0 28px;
    padding-right: 26px;  /* breathing room before the bar */
  }
  .services-mobile-img{
    width: 100%;
    max-width: 420px;
    display:block;
    margin: 0 auto 14px;
    border-radius: 6px;
    box-shadow: 0 12px 26px rgba(0,0,0,.25);
  }
  .services-mobile-title{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align:center;
    font-size: 18px;
    line-height: 1.2;
    margin-bottom: 10px;
  }
  .services-mobile-copy{
    max-width: 520px;
    margin: 0 auto;
    text-align:left;
  }

  /* Remove fixed-height lock from legacy wrapper so section can grow */
  .serviceBg div[style*="height:674px"]{ height:auto !important; }

  /* ---- DISCOGRAPHY ---- */
  #Discography .discography{
    padding-left: 16px;
    padding-right: 16px;
    box-sizing:border-box;
  }
  #Discography .discography__stage{ max-width: 100%; }
  #Discography .discography__cover img{ width: min(78vw, 360px); }
  #Discography .discography__player{
    max-width: 100%;
    width: 100%;
    box-sizing:border-box;
  }
  #Discography .discography__tracks{ padding-left: 18px; }
  #Discography .discography__prev{ left: 10px; }
  #Discography .discography__next{ right: 10px; }

  /* ---- CONTACT ---- */
  .contact-info, .contact-formwrap{
    float:none !important;
    width:100% !important;
  }
  .contact-info{
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing:border-box;
  }
  .contact-formwrap{ padding: 0 18px 18px; box-sizing:border-box; }

  .contact-form-grid{
    display:block;
  }
  .contact-form-col{
    width:100%;
  }
  #contactForm input, #contactForm textarea,
  #contact input, #contact textarea{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing:border-box !important;
  }

  /* ---- EXEC STAFF ---- */
  .exec-wrap{
    width:100% !important;
    max-width:1050px !important;
    height:auto !important;
    background-size: cover !important;
    padding-bottom: 12px;
  }
  .exec-left, .exec-right{
    float:none !important;
    width:100% !important;
  }
  .exec-left{
    background-size: cover !important;
  }
  .exec-right{
    padding: 0 18px 18px !important;
    box-sizing:border-box;
  }
  .exec-left div[style*="font-size:36px"]{
    padding-left: 18px !important;
    padding-right: 18px !important;
    font-size: 28px !important;
    line-height: 1.1;
  }
}

@media (max-width: 420px){
  .services-mobile{ padding-left: 12px; padding-right: 12px; }
  .services-mobile-bar{ right: 14px; }
  .services-mobile-item{ padding-right: 22px; }
  .services-mobile-title{ font-size: 17px; }
}



/* =========================================================
   RESPONSIVE PLAN (Stable1 + Discography) — v4
   Breakpoints:
     - <= 900px (tablet)
     - <= 640px (phone)
     - <= 420px (small phone)
   ========================================================= */

/* --- HERO --- */
.hero-bg{
  background: url(../images/home-2.jpg) no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  height: 100vh;
  width: 100vw;
}
@media (max-width: 640px){
  /* Mobile: reduce hero height so logo isn't cropped and avoid fixed bg issues on iOS */
  #Home.hero{ height: auto !important; min-height: 62vh !important; }
  .hero-bg{
    height: 62vh;
    background-attachment: scroll;
    background-position: center top;
  }
}

/* --- GLOBAL SAFE FLUIDS --- */
img{ max-width:100%; height:auto; }
*{ box-sizing:border-box; }

/* --- LIVE: make video scale --- */
@media (max-width: 900px){
  .liveVideo, .vidMeasurements{ width:100% !important; float:none !important; }
  .liveContent{ width:100% !important; float:none !important; }
}
.video-responsive{
  width:100%;
  max-width:100%;
  aspect-ratio: 16/9;
  position: relative;
}
.video-responsive iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* --- SERVICES (PHONE): 1-by-1 images + right-padded divider + text under titles --- */
@media (max-width: 640px){
  /* if you have a mobile services stack container, make it single-column */
  .services-mobile{ display:block !important; }
  .services-mobile .services-item{ margin: 0 0 18px 0; }
  .services-mobile .services-item img{
    display:block;
    width:100%;
    max-width:360px;
    margin: 0 auto 10px auto;
    border-radius: 2px;
  }
  .services-mobile .services-title{
    font-weight: bold;
    text-align:center;
    margin: 0 0 6px 0;
  }
  .services-mobile .services-copy{
    text-align:center;
    font-size: 14px;
    line-height: 1.4;
    margin: 0 18px 0 18px;
  }

  /* yellow divider: pull away from edge */
  .serviceDivider, .services-divider{
    margin-right: 18px !important;
  }
}

/* --- DISCOGRAPHY: remove extra bg + player fits --- */
#Discography{
  /* keep banner + stage clean; prevent unexpected inherited background */
  background-image: none !important;
}
#Discography audio{
  width:100% !important;
  max-width:100% !important;
  display:block;
}
#Discography .player-wrap,
#Discography .discography-player{
  width:100%;
  max-width:100%;
  overflow:hidden;
}

/* phone: hide banner */
@media (max-width: 640px){
  .discography-banner-inner{ display:none !important; }
}

/* --- CONTACT FORM: prevent overflow + stack --- */
@media (max-width: 640px){
  .contact-info, .contact-formwrap{ float:none !important; width:100% !important; padding-left:18px !important; padding-right:18px !important; }
  #subscribe{ width:100% !important; }
  #contact .contact-form-grid{ display:block !important; }
  #contact .contact-form-col{ width:100% !important; }
  #contact input, #contact textarea{
    width:100% !important;
    max-width:100% !important;
    font-size:16px;
    padding:10px 10px;
  }
  #contact button{ width:100% !important; }
}

/* --- EXECUTIVE STAFF: stack on mobile --- */
@media (max-width: 640px){
  .exec-wrap{ width:100% !important; height:auto !important; background-size: cover; }
  .exec-left, .exec-right{ float:none !important; width:100% !important; height:auto !important; }
  .exec-left > div{ padding-left:18px !important; padding-right:18px !important; padding-top:18px !important; font-size:26px !important; }
  .exec-right .copy{ padding: 12px 18px 18px 18px !important; }
}

/* --- FORM STATUS visibility helpers --- */
.form-status{ display:none; padding:10px 12px; border-radius:6px; margin: 10px 0; }
.form-status.is-visible{ display:block; }


/* ===== Contact form messages ===== */
.form-msg{margin:10px 0;padding:10px 12px;border-radius:4px;font-size:14px;box-sizing:border-box;}
.form-msg-success{background:#dff6e5;color:#1b6b2a;}
.form-msg-error{background:#fde2e2;color:#8a1f1f;}


/* ===== Universal form sizing safety ===== */
#contactForm input, #contactForm textarea{box-sizing:border-box;max-width:100%;}


/* Prevent background scroll when overlay menu is open */
.no-scroll{overflow:hidden;}


/* =============================
   PATCH v7 — Hosted path fixes + mobile plan
   ============================= */

/* Discography: remove legacy background overlays, keep banner only */
.section-discography { background-image: none !important; }
.section-discography .discography-panel{
  background: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)), url('../images/serviceBG.jpg') center/cover no-repeat;
}
.section-discography .discography__stage,
.section-discography .discography__viewport,
.section-discography .discography__track{
  background: transparent !important;
}

/* Video shadow should scale with iframe */
.videoShadow, .video-shadow{
  max-width: 100%;
  width: 100%;
  background-size: 100% 100%;
}

/* Ensure About section is never hidden by mobile rules */
#About, .about, .aboutSection, .section-about { display:block; }

/* Mobile plan */
@media (max-width: 768px){
  /* Hero: reduce background height to avoid huge blank space */
  #Home{ min-height: 60vh; background-position: center top; background-size: cover; }

  /* Services: images stack 1-by-1 */
  #Services .services-images, .servicesGrid, .serviceGrid{
    display:block !important;
  }
  #Services .services-images img,
  #Services img.serviceImg{
    display:block;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 14px 0 !important;
  }

  /* Yellow divider line: pad away from edge */
  .yellowLine, .yellow-line, .servicesDivider{
    margin-right: 10% !important;
  }

  /* Discography: banner can hide on phones (requested) */
  .discography-banner{ display:none; }
  .discography__cover img{ max-width: 84vw; height:auto; }
  .discography__player{ width: 92vw; max-width: 92vw; }
  .discography__player audio{ width: 100%; }

  /* Contact form: inputs must fit screen */
  #Contact input, #Contact textarea, #contact input, #contact textarea{
    width: 100% !important;
    box-sizing: border-box;
  }
  .contactFormRow, .contact-form-row{ display:block !important; }
  .contactFormRow > *, .contact-form-row > *{ width:100% !important; margin:0 0 10px 0 !important; }

  /* Executive: stack */
  .exec-wrap{ width: 100% !important; height:auto !important; background-size: cover; }
  .exec-left, .exec-right{ float:none !important; width:100% !important; height:auto !important; }
  .exec-left{ background-repeat:no-repeat; background-position:left center; background-size: contain; }
  .exec-left div{ padding-left: 24px !important; padding-top: 24px !important; font-size: 28px !important; }
  .exec-right{ padding: 0 18px 22px 18px; }
}


/* =========================================================
   GALLERY LIGHTBOX (vanilla)
   ========================================================= */
.lightbox{
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  background:rgba(0,0,0,.85);
  z-index:9999;
  padding:2rem 1rem;
}
.lightbox.open{ display:grid; }
.lightbox__figure{
  margin:0;
  max-width:min(92vw, 980px);
  max-height:88vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.75rem;
}
.lightbox__img{
  width:auto;
  max-width:100%;
  max-height:78vh;
  object-fit:contain;
  border-radius:8px;
  box-shadow:0 12px 40px rgba(0,0,0,.6);
  background:#111;
}
.lightbox__caption{
  color:#fff;
  font-size:0.95rem;
  text-align:center;
  opacity:.9;
}
.lightbox__close{
  position:absolute;
  top:.75rem;
  right:.75rem;
  width:44px;
  height:44px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:28px;
  line-height:44px;
  cursor:pointer;
}
.lightbox__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:34px;
  line-height:48px;
  cursor:pointer;
}
.lightbox__prev{ left:.75rem; }
.lightbox__next{ right:.75rem; }
@media (max-width: 640px){
  .lightbox{ padding:1.25rem .75rem; }
  .lightbox__nav{ width:44px; height:44px; font-size:30px; line-height:44px; }
}
html.lightbox-open{ overflow:hidden; }

/* =========================================================
   CONTACT FORM STATUS (JS toggles)
   ========================================================= */
.form-status{ display:none; }
#aboutImg { opacity: 0; transition: opacity 1.5s ease; }
#aboutImg.ImgFade { opacity: 1; }
.yt-wrap{
  width: 100%;
  position: relative;
  padding-top: 56.25%; /* 16:9 */
}

.yt-iframe{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Responsive YouTube */
.yt-wrap{
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
}

.yt-iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.videoShadow{
float:left; 
    max-width:600px; 
    max-height:472px; 
    width: 100%; 
        background-image:url(../images/videoShadow.png); 
    padding-top:90px; 
    padding-left:25px; 
    padding-bottom:20px;
}