@charset "utf-8";
/* CSS Document */

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.row {
	margin-top:0px;
	}

.row::before,
.row::after {
  display: table;

  content: " ";
  clear: both;
}

.one,
.one-third,
.two-thirds,
.one-fourth,
.half {
  width: 100%;
}


/* Styling */

body {
  background: #ffffff;
  color: #233962;
/*  font-size: .8em;
  font-family: Helvetica, Arial, sans-serif;*/
 /* font-family: freight-display-pro;'Lato'*/;
  /*padding: 0 10px;*/
}

a {
  color: #2581dc;
}

.column {
  /*border: 1px solid #666;*/
  /*background: #343436;*/
 /* padding: 15px;*/

  padding: 15px;
   padding-top: 0px;

}

  h1 {
	text-align: center;
/*	font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 180%;*/
	margin-left:20px;
	margin-right:20px;
	margin-bottom:0px; padding: 0; 
	
}

	.logoText {
	   text-align: center;
/*	  font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	  font-size: 130%;*/
	  margin-top:0px;
	  font-weight: 600;
	}

/*  h2 {
	text-align: left;
	font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 115%;
}*/

  h2 {
	text-align: center;
/* 	font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 300%;*/
	margin-bottom:.27em;
}

 h3 {
	text-align: center;
/* 	font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 300%;*/
	margin-bottom:.27em;
}

  .pSansText200 {
	text-align: left;
/*	font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 150%;
	font-weight:400;*/
	letter-spacing: .03em;
    line-height: 1.2em;
}

  .pSansText150 {
	text-align: left;
/*	font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 150%;*/
}

  .pSansText120 {
	text-align: left;
/*	font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 120%;*/
	line-height: 1.2em;
}

  .pSansText67 {
	text-align: left;
/*	font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 67%;*/
	line-height:1em;
}

  .pSansText80 {
	text-align: left;
/*	font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 80%;*/
	line-height:1em;
}

  .pSansText67NoAlign {
/*	font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 67%;*/
	line-height:1em;
}

  .pSansText75NoAlign {
/*	font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 67%;*/
	font-size: 67%;
}

  .pDispText200 {
	text-align: left;
/*	font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 200%;*/
}

  .pDispText150 {
	text-align: left;
/*	font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 150%;*/
}

.btn {
  border: 1px solid #333;
  background-color: white;
  color: #333;
  padding: 15px 28px;
  font-size: 14px;
  font-weight:600;
  cursor: pointer;
/*  font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
  letter-spacing: .4em;
  margin:0px 2px 8px 2px;
  border-radius: 2px;
}

.btnRound {
	text-align:center;
	display:block;
	margin:40px auto;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border-radius:12px;
	line-height:80px;
	height:auto;
	width:auto;
	max-width:390px;
	font-size:1.1em;
	color:#fff;
	border-color:#ddd;
	border-style:solid;
	border-width:2px;
	cursor:pointer;
	text-decoration:none;
}

#bgBtnBlue { background-color:#379cff;!important;  }
#bgBtnPurple { background-color:#63F;!important;  }
#bgBtnRed { background-color:#f12626;!important;  }
#bgBtnGreen { background-color:#0C0;!important;  }

/* Gray */
.default {
  border-color: #333;
  color: #333;
}

.default:hover {
  background: #fafafa;
}

.center { text-align:center; }
.center2 {display:block; margin-left:auto; margin-right:auto }

/*button {
  background-color: #fff; 
  border: medium;
  border-color: #333;
  color: #333;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
 
}*/

#landingBG{background-image:url(../img/groomPhone.jpg); background-repeat:no-repeat; background-size:cover;}
/*#crewBG{background-image:url(../img/dj-sound-system-rental.png); background-repeat:no-repeat; background-size:cover;}*/



.scaleImage{width:100%; height:auto; }
.scaleImage50{width:50%; height:auto; }

#intro{margin:20px 0 0 0px; width:45%; } 
#intro1a{margin:25px 0 0 0px; width: 50%;} 
#intro2{margin:25px 0 0 0px; width: 55%;} 

.padLeft3{padding-left:3%;}
.padRight3{padding-right:3%;}

/* responsive form code */
/* keep this input password here as well as repeated below. The css screws up if it's taken away, and I haven't figured out why yet */
/*input[type=password]{ margin-bottom:20px; margin-top:10px; width:100%; padding:15px; border-radius:5px; border:1px solid #7ac9b7; }*/

/* stop Safari etc auto styling the following */
textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;  
}
.responsiveForm{ width:100%; } 
/* Makes responsive fields.Sets size and field alignment.*/
.form-group{ margin-bottom:50px; text-align: left; /*font:pSansText150; 
	font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 170%; font-weight:600;*/}
.formField{ margin-top:10px; width:100%; padding:15px; border-radius:2px; border:1px solid #cccccc; display:block; background-color:#fafafa; /*font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 80%;*/ }
.formFieldError{ border:1px solid #F00; }
.formField.formFieldError{ margin-top:10px; width:100%; padding:15px; border-radius:5px; border:1px solid #F00;  display:block; }
/*input[type=email]{ margin-bottom:20px;	margin-top:10px; width:100%; padding:15px; border-radius:5px; border:1px solid #7ac9b7; }*/
.textError{ color:#F03; margin-bottom:20px; !important}


/*input[type=submit]{ margin:20px auto 20px auto; width:160px; padding:15px; border-radius:2px; border:1px solid #cccccc; color:white; font-size:15px; cursor:pointer; background-color:#444; font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:100%;}*/
textarea{ width:100%; padding:15px; margin-top:10px; border:1px solid #7ac9b7; border-radius:2px; margin-bottom:20px; resize:none; } 

.ui-dialog-titlebar { display: none; } /* kill title bar in jquery dialog */
.textError{ color:#F03; margin-bottom:20px; !important; display:none; }


div.tabs2 {
   cursor: default !important;
   display:block;
   height:34px;
   margin-top:-50px;
}

.boldGrey{
	font-weight:bold;
	color:#777;}
	
.up10 { margin-top:-10px; }	
.up20 { margin-top:-20px; }
.m5 { margin-top:5px; }
.m10 { margin-top:10px; }
.m20 { margin-top:40px; }
.mb20 { margin-bottom:20px; }
.pointer {cursor: pointer;}
/* 
* Any styling that should be applied to screen widths larger
* than a mobile device: tablet, laptop, desktop, etc. 
*/

.fbLogoWhite{ font-family: Facebook Letter Faces, Arial; color:white; }
.fbLogoBlack{ font-family: Facebook Letter Faces, Arial; color:#231f20;  }
.fbLogoBlue{ font-family: Facebook Letter Faces, Arial; color:#2581dc; }

/*.deliveryButton{ position:absolute; margin-left:10px; height:39px; }*/

/* changes height of autocomplete results, to avoid fat finger */
ul.ui-autocomplete li.ui-menu-item { height: 35px; }

/*Floating Back-To-Top Button*/
    #myBtn {
        position: fixed;
        bottom: 10px;
        float: right;
        right: 18.5%;
        left: 77.25%;
        max-width: 78px;
        width: 100%;
        font-size: 12px;
        border-color: #333;
        background-color: #fff;
        padding: .5px;
		border-radius: 4px;
		border-width:thin;
		padding: 3px 0px 2px 0px;
		-webkit-transition: background-color #fff;

    }
/*On Hover Color Change*/
    #myBtn:hover {
        background-color: #eee;
		-webkit-transition: background-color #333;
    }
	
.myBtnText {
		        
		color:#333; text-decoration:none;
}

.regTM12{ font-size:12px; vertical-align: super; }

.mT10{margin-top:10px!important;}
.mT20{margin-top:20px!important;}
.mT30{margin-top:30px!important;}
.mT40{margin-top:40px!important;}
.mT50{margin-top:50px!important;}

.lineSpace10{ margin: 10px 0; }
.lineSpace15{ margin: 15px 0; }
.lineSpace20{ margin: 20px 0; }
.lineSpace30{ margin: 30px 0; }
.lineSpace40{ margin: 40px 0; }
.lineSpace50{ margin: 50px 0; }

.font66{ font-size: .66em }
.blkYelBG { background-color:#FF0;color:#000;padding:2px; }
.blkRedBG { background-color:#F00;color:#000;padding:2px; }
.blkGrnBG { background-color:#0F0;color:#000;padding:2px; }

.thickHR {height:4px;border:none;color:#333;background-color:#333;}


.iframeContainer {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.boxBorderTitleText {
	
	padding:0 30px 0 30px; 
	margin-top:35px; 
	border:solid; 
	border-color:#333; 
	background-color:#DDD;
	text-align:center;
}

.boxBorderCenteredText {
	
	padding:0 30px 20px 30px; 
	margin-top:35px; 
	border:solid; 
	border-color:#333; 
	text-align:center;
}

.boxBorderLeftText {
	
	padding:0 30px 20px 30px; 
	margin-top:35px; 
	border:solid; 
	border-color:#333; 
	text-align:left;
}

.bCT { text-align:right; }

.maxW320 { max-width:320px; }

@media only screen and (min-width: 1215px) {
	
	.headerLogoText{ margin-left:20px; }	
	.pandaLogoHeader{ vertical-align:middle; margin-top:-11px; }	
	
	div.tabs2 {
   cursor: default !important;
   display:block;
   height:34px;
   margin-top:20px;
	}
	
	
	  .one {
		width: 100%;
	  }
	  .half {
		width: calc(100% / 2);
	  }
	  .one-third {
		width: calc(100% / 3);
	
	  }
	  .one-fourth {
		width: calc(100% / 4);
	  }
	  .two-thirds {
		width: calc(100% / 3 * 2);
	  }
	  .column {
		float: left;
	  }
	  
	  h1 {
	   text-align: center;
	   margin-bottom:0px;
	   padding: 0;
	   
/*	  font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	  font-size: 200%;*/
		}
		
		.logoText {
		   text-align: center;
		   margin-top:0px;
/*		  font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
		  font-size: 150%;
		  font-weight: 600;*/
		  
		  
		}
		
	/*	h2 {
		   text-align: left;
		 font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
		  font-size: 150%;
		}*/
		
			  h2 {
		text-align: center;
		/*font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
		font-size: 300%;*/
		margin-bottom: .67em;
	}
	
				  h4 {
		font-size: 1.5em;
		margin-bottom: .67em;
	}
		
		  h3 {
		text-align: center;
		/*font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
		font-size: 300%;*/
		margin-bottom: .67em;
	}
	
	body {
			  font-size: 1.1em;
			  padding: 0 10px;
		 }
		 
		#intro{margin:100px 0 0 55px; } 
		#intro1a{margin:35px 0 0 55px; width: 50%;} 
		#intro2{margin:50px 0 130px 55px; width: 30%; }
		#introShim{margin:50px 0 0 175px; width: 30%; height:400px;}
		#landingBG{background-image:url(../img/groom02bw2.jpg); background-repeat:no-repeat; background-size:cover;}
		
	.btn {
	  border: 1px solid #333;
	  background-color: white;
	  color: #333;
	  padding: 20px 44px;
	  font-size: 14px;
	  font-weight:600;
	  cursor: pointer;
	 /* font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
	  letter-spacing: .5em;
	  margin:0px 2px 8px 2px;
	  border-radius: 2px;
	}
	
	/* Gray */
	.default {
	  border-color: #333;
	  color: #333;
	}



}



@media only screen and (min-width: 1000px) and (max-width: 1214px) {
		  .one-third {
		width: 50%; margin-left:auto; margin-right:auto;/*calc(100% / 6);*/
	
	  }
}

@media only screen and (min-width: 650px) and (max-width: 999px) {
		  .one-third {
		width: 66%; margin-left:auto; margin-right:auto;/*calc(100% / 6);*/
	
	  }
}




/*@media only screen and (max-width: 549px) and (min-width: 400px) {
	
	#intro{margin:35px 0 0 50px; width:25%;} 
	#intro1a{margin:35px 0 0 50px; width: 35%;}
	#intro2{margin:35px 0 0 50px; width: 35%;} 
	#landingBG{background-image:url(../img/groom02bw2.jpg); background-repeat:no-repeat; background-size:cover;}
}*/

