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

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.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: 1em;
  font-family: 'FreightSansProLight-Regular';
 /* font-family: freight-display-pro;'Lato'*/;
  /*padding: 0 10px;*/
}

a {
  color: #2581dc;
}

.column {
  /*border: 1px solid #666;*/
  /*background: #343436;*/
 /* padding: 15px;*/
  padding: 15px;
  margin-bottom: 10px;
  
}

  h1 {
	text-align: center;
	font-family: 'FreightSansProLight-Regular';
	font-size: 200%;
	margin-left:20px;
	margin-right:20px;

}

	.logoText {
	   text-align: center;
	  font-family: 'FreightSansProLight-Regular';
	  font-size: 130%;
	  margin-top:0px;
	  font-weight: 600;
	}

/*  h2 {
	text-align: left;
	font-family: 'FreightSansProLight-Regular';
	font-size: 115%;
}*/

  h2 {
	text-align: center;
 	font-family: 'FreightSansProLight-Regular';
	font-size: 300%;
	margin-bottom:.27em;
}

 h3 {
	text-align: center;
 	font-family: 'FreightSansProLight-Regular';
	font-size: 300%;
	margin-bottom:.27em;
}

  .pSansText200 {
	text-align: left;
	font-family: 'FreightSansProLight-Regular';
	font-size: 150%;
	font-weight:400;
	letter-spacing: .03em;
    line-height: 1.2em;
}

  .pSansText200center {
	text-align: center;
	font-family: 'FreightSansProLight-Regular';
	font-size: 150%;
	font-weight:400;
	letter-spacing: .03em;
    line-height: 1.2em;
}

  .pSansText80center {
	text-align: center;
	font-family: 'FreightSansProLight-Regular';
	font-size: 80%;
	line-height:1em;
}

.pSansText67center {
	text-align: center;
	font-family: 'FreightSansProLight-Regular';
	font-size: 67%;
	line-height:1em;
}

  .pSansText120normalWeight {
	text-align: left;
	font-family: 'FreightSansProLight-Regular';
	font-weight:100;
	font-size: 120%;
	line-height: 1.2em;
}

.pSansText120normalWeightCenter {
	text-align: center;
	font-family: 'FreightSansProLight-Regular';
	font-weight:100;
	font-size: 120%;
	line-height: 1.2em;
}

  .pSansText150 {
	text-align: left;
	font-family: 'FreightSansProLight-Regular';
	font-size: 150%;
}

  .pSansText120 {
	text-align: left;
	font-family: 'FreightSansProLight-Regular';
	font-size: 120%;
	line-height: 1.2em;
}

  .pSansText67 {
	text-align: left;
	font-family: 'FreightSansProLight-Regular';
	font-size: 67%;
	line-height:1em;
}

  .pSansText80 {
	text-align: left;
	font-family: 'FreightSansProLight-Regular';
	font-size: 80%;
	line-height:1em;
}

  .pSansText67NoAlign {
	font-family: 'FreightSansProLight-Regular';
	font-size: 67%;
	line-height:1em;
}

  .pDispText200 {
	text-align: left;
	font-family: 'FreightDispProLight-Regular';
	font-size: 200%;
}

  .pDispText150 {
	text-align: left;
	font-family: 'FreightDispProLight-Regular';
	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: 'FreightSansProLight-Regular';
  letter-spacing: .4em;
  margin:0px 2px 8px 2px;
  border-radius: 2px;
  
  display: inline-block;
  vertical-align: middle;
}


/* Gray */
.default {
  border-color: #333;
  color: #333;
}

.default:hover {
  background: #fafafa;
}

.button-container {
	display: inline-block;
  }
  
  .clickable-image {
	margin-left: 10px;
	vertical-align: middle;
	cursor: pointer;
  }

/* highlighting */
.yelBG{background-color:#ff0}

.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;}
#landingKaraokeBG{background-image:url(../img/karaoke/boys1kiama.jpg); background-repeat:no-repeat; background-size:cover;}
#landingTriviaBG{background-image:url(../img/trivia/trivia02.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; font:pSansText150; text-align: left;
	font-family: 'FreightSansProLight-Regular';
	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: 'FreightSansProLight-Regular';
	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: 'FreightSansProLight-Regular'; 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; }
.up40 { margin-top:-40px; }
.up100 { margin-top:-100px; }
.m5 { margin-top:5px; }
.m10 { margin-top:10px; }
.m20 { margin-top:40px; }
.m60 { margin-top:60px; }
.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; }

#deliveryFee {
	
	display:none;
	padding-left:20px; padding-right:20px;
	border: solid #2581dc 2px;
	height:auto;
	text-align:center;
}

/*.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; }


#google5Star1 {background-image:url(../img/5-star-customer-rated-google.jpg); background-repeat:no-repeat; background-size:contain; width:200px; height:171px; }
#facebook5Star1 {background-image:url(../img/5-star-customer-rated-facebook.jpg); background-repeat:no-repeat; background-size:contain; width:200px; height:171px;  }

.parentRatings {
	margin: 1rem;
	/* padding: 1rem 2rem; */
	text-align: center;
  }
  .childRatings {
	display: inline-block;
	/* padding: 1rem 1rem; */
	vertical-align: middle;
  }


@media only screen and (min-width: 800px) {
	
	.headerLogoText{ margin-left:20px; }	
	.pandaLogoHeader{ vertical-align:middle; margin-top:-11px; }	
	#subTitleSmallScreen {display:none;}
	
	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;
	  font-family: 'FreightSansProLight-Regular';
	  font-size: 200%;
		}
		
		.logoText {
		   text-align: center;
		  font-family: 'FreightSansProLight-Regular';
		  font-size: 150%;
		  margin-top:0px;
		  font-weight: 600;
		}
		
	/*	h2 {
		   text-align: left;
		 font-family: 'FreightSansProLight-Regular';
		  font-size: 150%;
		}*/
		
			  h2 {
		text-align: center;
		font-family: 'FreightSansProLight-Regular';
		font-size: 300%;
		margin-bottom: .67em;
	}
		
		  h3 {
		text-align: center;
		font-family: 'FreightSansProLight-Regular';
		font-size: 300%;
		margin-bottom: .67em;
	}
	
	body {
			  font-size: 1.5em;
			  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: 'FreightSansProLight-Regular';
	  letter-spacing: .5em;
	  margin:0px 2px 8px 2px;
	  border-radius: 2px;
	}
	
	/* Gray */
	.default {
	  border-color: #333;
	  color: #333;
	}



}

/*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;
}

@media only screen and (max-width: 4000px) and (min-width: 1700px) {
	
	#gearDivSmall{display:none;}
	.killTopBotMargin {margin-top:0px;margin-bottom:0px}
	
}

@media only screen and (max-width: 1699px) and (min-width: 1500px) {
	
	.headerLogoText{color:#262626; }
	#gearDivLarge{display:none;}
	.killTopBotMargin {margin-top:0px;margin-bottom:0px}
}

@media only screen and (max-width: 1499px) and (min-width: 1281px) {
	
	.headerLogoText{color:#262626; }
	#intro{margin:30px 0 0 20px; } 
	#intro1a{margin:35px 0 0 20px; width: 50%;}
	#intro2{margin:40px 0 20px 20px; width: 30%; }

	#landingBG{background-image:url(../img/groom02bw2.jpg); background-repeat:no-repeat; background-size:cover;}	
	#gearDivLarge{display:none;}
/*	.half { width: calc(100% / 1.3333333); }
    .one-fourth { width: calc(100% / 8); }*/
	.killTopBotMargin {margin-top:0px;margin-bottom:0px}
}

@media only screen and (max-width: 1280px) and (min-width: 1071px) {
	
	.headerLogoText{color:#262626; }
	#intro{margin:30px 0 0 12px; /*font-size: .5em;*/ } 
	#intro1a{margin:30px 0 0 12px; width: 50%; /*font-size: .5em;*/}
	#intro2{margin:35px 0 60px 12px; width: 35%;/* font-size: 1em;*/}

	body{ font-size: 1.1em; }
	
	#landingBG{background-image:url(../img/groom02bw2.jpg); background-repeat:no-repeat; background-size:cover;}	
	#gearDivLarge{display:none;}
/*	.half { width: calc(100% / 1.3333333); }
    .one-fourth { width: calc(100% / 8); }*/
	.killTopBotMargin {margin-top:0px;margin-bottom:0px}
}

@media only screen and (max-width: 1070px) and (min-width: 950px) {
	
	#intro{margin:35px 0 0 15px; } 
	#intro1a{margin:26px 0 0 15px; width: 50%;}
	#intro2{margin:26px 0 40px 15px; width: 34%; }

	body{ font-size: 1.1em; }
	#landingBG{background-image:url(../img/groom02bw2.jpg); background-repeat:no-repeat; background-size:cover;}
	#gearDivLarge{display:none;}
	/*.half { width: calc(100% / 1.3333333); }
    .one-fourth { width: calc(100% / 8); }*/
	.killTopBotMargin {margin-top:0px;margin-bottom:0px}
}

@media only screen and (max-width: 949px) and (min-width: 850px) {
	
	.pandaLogoHeader{ vertical-align:middle; margin-top:-7px; }
	#intro{margin:35px 0 0 16px; } 
	#intro1a{margin:26px 0 0 16px; width: 50%;}
	#intro2{margin:26px 0 40px 16px; width: 34%; }

	body{ font-size: 1em; }
	#landingBG{background-image:url(../img/groom02bw2.jpg); background-repeat:no-repeat; background-size:cover;}
	#gearDivLarge{display:none;}
	/*.half { width: calc(100% / 1.3333333); }
    .one-fourth { width: calc(100% / 8); }*/
	.killTopBotMargin {margin-top:0px;margin-bottom:0px}
}

@media only screen and (max-width: 849px) and (min-width: 800px) {	
	
	#fiveStars{margin-top:-50px;}
	#subTitleLargeScreen {display:none;}
	.pandaLogoHeader{ vertical-align:middle; margin-top:-7px; }
	#intro{margin:35px 0 0 16px; } 
	#intro1a{margin:26px 0 0 16px; width: 50%;}
	#intro2{margin:26px 0 40px 16px; width: 40%; }
	body{ font-size: 1em; }
	#landingBG{background-image:url(../img/groom02bw2.jpg); background-repeat:no-repeat; background-size:cover;}
	#gearDivLarge{display:none;}
	/*.half { width: calc(100% / 1.3333333); }
    .one-fourth { width: calc(100% / 8); }*/
	.killTopBotMargin {margin-top:0px;margin-bottom:0px}
}

@media only screen and (max-width: 799px) and (min-width: 690px) {
	
	#subTitleLargeScreen {display:none;}
	#fiveStars{margin-top:-50px;}
	.pandaLogoHeader{ vertical-align:middle; margin-top:-15px; }
	#intro{margin:40px 0 0 15px; } 
	#intro1a{margin:26px 0 0 15px; width: 50%;}
	#intro2{margin:26px 0 40px 15px; width: 46%;} 
	body{ font-size: 1.1em; }
	#landingBG{background-image:url(../img/groom02bw2.jpg); background-repeat:no-repeat; background-size:cover;}
	#gearDivLarge{display:none;}
}

@media only screen and (max-width: 689px) and (min-width: 550px) {
	
	#subTitleLargeScreen {display:none;}
	#fiveStars{margin-top:-50px;}
	h1 {font-size: 150%;}
	#intro{margin:40px 0 0 10px; width:30%; } 
	#intro1a{margin:26px 0 0 10px; width: 30%;}
	#intro2{margin:26px 0 30px 10px; width: 33%;} 
	body{ font-size: 1.0em; }
	#landingBG{background-image:url(../img/groomPhone.jpg); background-repeat:no-repeat; background-size:cover;}
	#gearDivLarge{display:none;}
}

@media only screen and (max-width: 549px) and (min-width: 510px) {
	
	#subTitleLargeScreen {display:none;}
	#fiveStars{margin-top:-50px;}
	#intro{margin:40px 0 0 5px; width:30%;} 
	#intro1a{margin:26px 0 0 5px; width: 36%;}
	#intro2{margin:26px 0 30px 5px; width: 40%;} 

	body{ font-size: 1.0em; }
	#landingBG{background-image:url(../img/groomPhone.jpg); background-repeat:no-repeat; background-size:cover;}
	#gearDivLarge{display:none;}
}

@media only screen and (max-width: 509px) and (min-width: 400px) {
	
	#subTitleLargeScreen {display:none;}
	#fiveStars{margin-top:-50px;}
	#intro{margin:40px 0 0 5px; width:30%;} 
	#intro1a{margin:26px 0 0 5px; width: 36%;}
	#intro2{margin:26px 0 30px 5px; width: 40%;} 

	body{ font-size: 1.0em; }
	#landingBG{background-image:url(../img/groomPhone.jpg); background-repeat:no-repeat; background-size:cover;}
	#gearDivLarge{display:none;}
}

@media only screen and (max-width: 800px) {
	
	h1 {font-size: 150%;}
	#fiveStars{margin-top:-50px;}
	#subTitleLargeScreen {display:none;}
	.headerLogoText{margin-left:8px; }
	.pandaLogoHeader{ vertical-align:middle; margin-top:-7px; }	
	#gearDivLarge{display:none;}
	  .pSansText200 {
	text-align: left;
	font-family: 'FreightSansProLight-Regular';
	/*font-size: 200%;*/
	font-weight:400;
	  }
	.deliveryButton{ display:inline; margin:12px 0 0 10px; height:37px; }



.killTopBotMargin {margin-top:-50px;margin-bottom:-50px}
.killTopBotMargin30 {margin-top:-30px;margin-bottom:-30px}
.killTopMargin30 {margin-top:-30px;}
.killTopBotPadding {padding-top:0px;padding-bottom:0px}

}




/*@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;}
}*/