@charset "utf-8";

/* Smartphones (portrait and landscape) ----------- */

/*@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {----------- */

@media screen and (max-device-width: 480px),
screen and (max-width: 800px) {

#mobile {
	display: block;
}
	
.container {
	width:94%;
	padding: 0;
	margin: 0 3%;
}
	
h1 { 
	color: #ed2024;
    font-size: 24px;
    font-weight: 600;
    line-height: 24px;
}
	
a.butt-sm, button {
 	height:24px;
	width:140px;
	font-size:16px;
	line-height:24px;
}
	

.btm-cta, .benefits-perks {
    margin: 4% 0;
}
	
	
.btm-cta p {
    margin: 4% 0 0 0;
}
	
.homepage-message {
	border-bottom: 1px solid #f9f3f4;
	padding-bottom: 4%;
}
	.homepage-message h1, .homepage-message p {
		margin: 4% 0;
	}

/* HEADER */

.header {
	height: 80px;
	position: fixed;
    width: 100%;
	border-bottom:1px solid #f9f3f4;
	background-color:rgba(255,255,255,1);

}
	
	.header-spacer { 
		height: 80px;
	}

	.logo {
		height: 40px;
		margin-top: 5px;
		width: 30%;
		background-image:url(../images/logo.png);
		background-position:left center;
		background-repeat:no-repeat;
		background-size: contain;
		display:inline-block;
		float:left;
	}
	
	.header .phone {
		display:inline-block;
		float: right;
		height:50px;
		line-height:50px;
		font-size:14px;
		color:#b32017;
		text-align:right;
	}
		
		.header .phone b {
			color:#ed2024;
			font-weight:600;
			margin-left:5px;
		}
	
	.nav { 
		display:block;
		float: left;
		width: 100%;
	}
		
		.nav .pages {
			display:block;
			margin-top:0px;
			text-align:right;
		}
		
			.nav .pages a {
				margin:0;
				font-size:10px;
				float: left;
				text-align: center;
			}
	
				.nav .pages a.sm{
					width: 14.3%;
				}

				.nav .pages a.lg{
					width: 19%;
				}


/* HERO */

	/* home */
				
#homepage .hero {
	height: 230px;
	background-size: cover;
}

	#homepage .hero h1 {
		color: #ece0e1;
		display: block;
		font-size: 18px;
    	font-weight: 400;
		line-height: 24px;
		padding: 30px 0;
		text-align: center;
	}
	
	#homepage .hero a.butt {
		font-size: 24px;
		height: 40px;
		width: 260px;
		line-height: 40px;
	}
		
	/* internal pages */

#menu .hero, #schedule .hero, #catering .hero, #about .hero, #contact .hero {
	height: 150px;
	background-color:#7a1501;
	background-position:center center;
	background-repeat:no-repeat;
	background-image:url(../images/hero-contact.png);
	background-size: cover;
}

	#dba .hero.power-quality {
		background-image:url(../images/hero-system-integration.png);
		background-position:center left;
	}

	
	
	#contact .hero {
		background-size: cover;
		height: 100px;
	}

	.hero h2 {
		font-size: 24px;
		line-height: 24px;
		text-align: center;
		margin: 0;
		padding: 25px 0 0 0;	
	}
	
		#about .hero h2, #careers .hero h2 {
			font-size: 24px;
			line-height: 34px;
			text-align:center;
			color:#ece0e1;
			margin: 0;
			padding: 25px 0 0 0;	
		}
	
		#menu h1, #schedule h1, #catering h1, #about h1, #contact h1 {
			display: block;
			width: 100%;
			float: left;
			margin: 3% 0 6% 0;
		}
	
		#menu h3, #schedule h3, #catering h3, #about h3, #contact h3 {
			font-size: 13px;
		}

	
	
/* SALE */

.bullets {
	margin-bottom: 0px;
}

.bullets li {
	padding-left:20px;
	height:16px;
	margin-top:10px;
	background-image:url(../images/bullet.png);
	background-position:bottom left;
	background-repeat:no-repeat;
	font-size:16px;
	line-height:24px;
}

.photos img {
	width: 100% !important;
	height: auto !important;
	background-color: #C7C7C7;
	margin:2% 0 !important;
	float: left !important;
	display: inline-block !important;
}
	
#sale .hero h2 {
	padding-top: 70px !important;
}	
	
#sale .leadership h1 {
	margin-top: 30px !important;
}
	
	#sale .leadership span h1 {
		margin-top: 0px !important;
	}
	
	

/* HOME DBAs */
		
#homepage .DBA {
    height: auto;
	background-size: auto 100%;
}
	
	#homepage .DBA .container {
		border-bottom:1px solid #f2e9ea;
		padding-bottom: 3%;
		margin-bottom: 6%;
		float: left;
	}

	#homepage .DBA span {
		display:inline-block;
		float:left;
		width:100%;
		margin:3% 0% 6% 0%;
	}
	
		#homepage .DBA span:first-child {
			margin:3% 0% 6% 0% !important;
		}
	
	#homepage .DBA span img {
		height:100px;
		padding:3% 0 1% 0;
		margin:0 auto;
		display:block;
	}
	
	#homepage .DBA span h1 {
		text-align:center;
		margin:3% 0;
	}
	
	#homepage .DBA span p {
		margin-bottom:1%;
	}


/* DESCRIPTION */

.description {
	background-color:#ffffff;
	background-image:url(../images/DBA-home.png);
	background-position:center center;
	background-repeat:no-repeat;
	padding:60px 0;
}

	.description p {
		background-color:#ffffff;
		background-image:url(../images/DBA-home.png);
		background-position:center center;
		background-repeat:no-repeat;
		margin-top:30px;
		font-size: 16px;
    	line-height: 30px;
}


/* DESCRIPTION */

.description {
	background-color:#ffffff;
	background-image:url(../images/DBA-home.png);
	background-position:center center;
	background-repeat:no-repeat;
	padding:3% 0;
}
	
	.description h1{
		margin: 0 0 3% 0 !important;
	}

	.description p {
		background-color:#ffffff;
		background-image:url(../images/DBA-home.png);
		background-position:center center;
		background-repeat:no-repeat;
		margin-top:3%;
		font-size: 13px;
    	line-height: 20px;
}


/* DBA FEATURES */

#dba .center {
	background-color:#ffffff;
}

	#dba .center .container {
		border-bottom:1px solid #f2e9ea;
		padding:60px 20px;
		overflow:hidden;
	}
	
		#dba .center .left {
			width:785px;
			display:inline-block;
			float:left;
		}
		
			#dba .bullets li, #careers .bullets li {
				padding-left:20px;
				height:13px;
				margin-top:30px;
				background-image:url(../images/bullet.png);
				background-position:top left;
				background-repeat:no-repeat;
				font-size:16px;
				line-height:13px;
			}
		
		#dba .center .right {
			width:370px;
			display:inline-block;
			float:right;
		}
		
			#dba .center .right .butt-sm {
				width:200px;
				margin-bottom:30px;
			}
			
			#dba .center .right .promo {
				width:370px;
				height:450px;
				background-color:#87797a;
			}



/* INSTAGRAM */
		
.instagram {
	display: none;
}

	.instagram .container {
		min-height: 170px;
		border-bottom:1px solid #f2e9ea;
		overflow:hidden;
		padding: 60px 0 10px 0;
	}
	
		.instagram h1 {
			float:left;
			display:inline-block;
			margin-bottom: 30px;
		}
		
		.instagram a.butt-sm {
			float:right;
			display:inline-block;
		}

	.instagram .nav {
		display: none !important;
	}


/* BOTTOM CTA */
	
		.btm-cta h1 {
			display:block;
			text-align: center;
			margin: 3% 0 6% 0;
			float: none
		}
		
		.btm-cta a.butt-sm {
			float: none;
			margin: 0 auto;
			display:block;
			clear: both;
		}
	

/* CLIENTS */
		
.clients {
	background-color:#ffffff;
}

	.clients .container {
		min-height: 170px;
		border-bottom:1px solid #f2e9ea;
		overflow:hidden;
	}
	
		.clients h1 {
			width:100%;
			margin:60px 0 10px 0;
		}
	
		.clients img { 
			width:240px;
			height:170px;
			float:left;
			display:inline-block;
		}
		
		
/* QUOTES */
		
.quotes {
	background-color:#ffffff;
}

	.line {
		border-bottom:1px solid #f2e9ea;
		margin: 0 auto;
    	width: 98%;
	}
	
	
/* MENU */
		
.menu {
}

	.menu .container {
		padding: 3% 0;
		border-bottom: 1px solid #f2e9ea;
		overflow:hidden;
	}

		.menu .container:last-child {
			padding: 30px 0;
			border-bottom: none;
			overflow:hidden;
		}

		.menu h1 {
			display: block;
			width: 200px;
			float: left;
			margin: 3% 0 6% 0;
		}

		.menu span {
			display: block;
			width: 100%;
			float: right;
			padding: 0 0 6% 0;
			margin-bottom: 6%;
			border-bottom: 1px solid #f9f3f4;
		}

			.menu span:last-child {
				display: block;
				width: 100%;
				padding: 0;
				margin-bottom: 0;
				border-bottom: none;
			}

			.menu img {
				display: block;
				width: 100%;
				float: left;
				padding-right: 0px;
			}

			.menu h2 {
				display: inline-block;
				width: 100%;
				font-size: 16px;
				color: #b32017;
				margin-top: 6%;
			}

			.menu p {
				display: block;
				width: 100%;
				padding-top: 3%;
			}

			.menu .diet {
				height: 16px;
				line-height: 16px;
				font-size: 11px;
				font-weight: normal;
				color: #b32017;
				margin: 20px 20px 0 0;
				display: inline-block;
				float: left;
			}
			
				.menu .diet img{
					height: 16px;
					width: 16px;
					padding-right: 10px;
				}

	
/* LEADERSHIP */
	

	.leadership .container {
		padding: 3% 0;
		overflow:hidden;
		margin-bottom: 0;
	}
	
	.leadership span {
		display:block;
		float:left;
		width:100%;
		margin-right:0;
		border-bottom: 1px solid #f9f3f4;
		padding-bottom: 6%;
		margin-bottom: 6%;
	}
	
		.leadership span:last-child {
			display:block;
			float:left;
			width:100%;
			margin-right:0;
			border-bottom: none;
			padding-bottom: 3%;
			margin-bottom: 0;
		}
	
	.leadership span img {
		height:auto;
		width:29%;
		float:left;
		background-color:#333;
		display:inline-block;
	}
	
	.leadership span h1 {
		float: left !important;
		width: 59% !important;
		margin: 0 0 3% 3% !important;
	}
	
	.leadership span h2 {
		width:59%;
		text-align:left;
		float:left;
		display:inline-block;
		margin:0;
		margin: 0 0 3% 3%;
	}
	
	.leadership span p {
		width:59%;
		text-align:left;
		float:left;
		display:inline-block;
		margin: 0 0 3% 3%;
	}
	

/* HISTORY */
		
.history {
}

	.history .container {
		padding-bottom:6%;
	}

	.history h1 {
		margin:6% 0 !important;
	}


	.history IMG {
		display:inline-block;
		float:left;
		width:100%;
		margin-right:0;
	}
	
	.history p {
		width:100%;
		margin: 3% 0;
		float: left;
	}
	
	
	
/* CALENDAR */

.month {
	margin-top: 3%;
	padding-top: 3%;
	border-top: 1px solid #f9f3f4;
	float: left;
	width: 100%;
}
	
	.month:first-child {
		border-top: none;
	}

	.month h1 {
		margin-bottom: 3%;
		margin-top: 0px;
	}

	.month span {
		display: none;
		padding: 3%;
	}

		.month .blank {
			background-color: #ffffff;
		}

		.month span:last-child {
			display: none;
		}

		.month span.event {
			display: block;
		}
	
		.month span h3{
			color: #d8bbbe;
			display: inline-block;
			float: left;
			font-weight: bold;
			width: 30%;
		}

			.month span h4{
				color: #d8bbbe;
				display: inline-block;
				float: right;
				text-align: right;
				width: 64%;
				font-size: 12px;
				line-height: 24px;
				margin-right: 6%;
			}

		.month span p{
			background-color: #ece0e1;
			display: block;
			float: left;
			margin: 6px 0;
			font-size: 10px;
			line-height: 14px;
			width: 90%;
			padding: 0 2%;
		}
	
	
/* CONTACT */
		
.contact {
	margin-top:4%;
}

	.contact .container {
		padding-bottom:4%;
	}
	
	.contact .form {
		display: none;
	}

	.contact .info {
		width:100%;
		float:left;
		font-size: 13px !important;
	}
	
	.contact .info div {
		font-size: 13px !important;
	}
	
		.contact .info p {
			font-size: 10px !important;
			padding: 0;
			margin: -3px 0 0 0;
		}
	
	img.map {
		border: 1px solid #f2e9ea;
		box-sizing: border-box;
		margin-top: 4%;
	}
	
	.contact .info h1 {
		margin-bottom: 4%;
	}
	
	
/* FOOTER */
		
.footer {
	height: 50px;
	background-color:#3e3536;
	background-image:url(../images/bg-footer.png);
	background-position:center center;
	background-repeat:no-repeat;
	overflow:hidden;
	background-size: cover;
}

	.footer .container {
	}
	
		.footer .copyright {
			color: #ece0e1;
			display: inline-block;
			float: left;
			font-size: 10px;
			line-height: 12px;
			padding-top: 12px;
			text-align: left;
			width: 40%;
		}
		
		.footer .nav {
			display: none;
		}

		
		.footer .logos {
			color: #ece0e1;
			display: inline-block;
			float: right;
			text-align: right;
			width: 56%;
		}


			.footer .logos img {
				display: inline-block;
				height: 20px;
				margin: 14px 0 0 16px;
				text-align: right;
			}


}