/* PROXIMA NOVA FONT */@import url("https://use.typekit.net/csp2epb.css");
@font-face {
font-family: 'comprehension';
src: url('/fonts/BenjaminMoore/Comprehension-Semibold.woff2') format('woff2'),
url('/fonts/BenjaminMoore/Comprehension-Semibold.woff') format('woff');
font-weight: normal;
font-style: normal;
}

html { background: #FFF; }
body {
	width:100%;
	font-family: proxima-nova, arial, sans-serif; 
	font-weight: 300;
	color: #454545;
}

.content, .content_full { margin: 0 auto; }

a, .phone, .summary .contact_bar li.phone, .content_map .summary .phone, .listing_moreinfo_tab .phone, .info .phone, .frame_site_phone .phone, .content_details .summary .phone, .content_map .phone-number { color: #2266bb; }

h1 {
	font-family: 'comprehension', arial, sans-serif;
	font-size: 3.5em;
	font-weight: 400;
	line-height: .8em;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	color: #454545;
}

.container {
	width: 925px;
	padding: 0 25px;
	margin: 0 auto;
}

#branding, #offer, #hero, .map_container, #long_description, #site_info { min-width: 975px; }


/* HEADER STYLES */
#branding {
	background: #FFF;
	box-shadow: 0 0 7px -4px #000;
}
#branding.sticky {
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 3;
}

#branding .container { display: table; min-width: initial; padding: 15px 25px; }
#branding .container > * { display: table-cell; vertical-align: middle; } 

#branding .container > span, #branding .container > a { width: 225px; }
#branding .container > a { display: inline-block; }
#branding .logo { max-width: none; width: 100%; float: none; margin: 0; }

#branding .location-info { text-align: right; }

#branding .location-info > * { display:inline-block; vertical-align: middle; margin-left: 15px; }
#branding .location-info span {
	display: block;
	font-size: 1em;
	line-height: 20px;
}
#branding .location-info .name, #branding .location-info .phone {
	text-transform: uppercase;
	font-size: 1em;
	font-weight: 600;
}
#branding .location-info .phone { color: #2266bb; font-size: 1.2; line-height: 24px; }

#branding #searchbar { display: none; }
/* END HEADER STYLES */



/* OFFER STYLES */
#offer {
	padding: 10px 0;
	background: #2266bb;
	color: #FFF;
	font-size: 1em;
	text-transform: uppercase;
	text-align: center;
}
#offer span { display: inline-block; vertical-align: middle; }
#offer .container a { color: #FFF; }

#offer .button { background: #FFF; color: #2266bb; font-size: .8em; font-weight: 600; padding: 2px 7px 1px; margin-left: 5px; }



/* FOOTER STYLES */
#site_info { background: #FFF; width: 100%; min-width: 850px; margin-bottom: 0; }
#site_info li.divider { font-size: 12px; font-weight: 100; display: none; }
#site_info a { font-size: 12px; }
#site_info #copyright { display: block; font-size: 11px; margin-top: -3px; }
#site_info #offer-disclaimer { margin-top: 10px; display: none; }
#site_info #offer-disclaimer::before { font-size: 11px; }

#site_info .footer-home-btn { display: none; }
/* END FOOTER STYLES */


/* HERO STYLES */
#hero {
	position: relative;
	background-color: #efefef;
}
#hero .container { background-color: #efefef; }

#hero .background {
	background: url("/images/PrivateLabels/BenjaminMoore/BenjaminMoore_Hero.jpg") no-repeat center center transparent;
	background-size: cover;
	position: absolute;
	left: 50%;
	top: 0;
	width: 50%;
	height: 100%;
	z-index: 1;
}

#hero .left {
	background-color: #efefef;
	position: relative;
	width: calc(50% - 45px);
	padding: 65px 45px 105px;
	padding-left: 0;
	z-index: 2;
}

#hero .left p {
	margin: 10px 0 15px;
	line-height: 2em;
}

#hero .container h1::before {
	content: "TRANSFORM YOUR SPACE";
	display: block;
}

#hero .container p::before {
	content: "The perfect color should be enjoyed for years to come. Extraordinarily durable Benjamin Moore paint and exterior stain ensure exactly that.";
	display: block;
}

#hero .links { display: block; width: 100%; }
#hero .links li::before, #hero .links li::after { display: none!important; }

#hero .links li a {
	display: inline-block;
	background: #2266bb;
	width: auto;
	color: #FFF;
	text-transform: uppercase;
	font-size: .8em;
	font-weight: 400;
	border-radius: 30px;
	padding: 10px 20px;
	text-decoration: none;
	margin: 0 7px 0 0;
}
#hero .links li.coupons_listing a { background: #c61537; }
#hero .links li.directions_listing, #hero .links li.mobile_listing { display: none; }
/* END HERO STYLES */


/* MAP AND INFO STYLES */
.map_container {
	position: relative;
	z-index: 2;
	padding: 0 0 55px;
	margin-top: -60px;
}

.map_container .container { display: table; table-layout:fixed; }
.map_container .container > * {
	background: #FFFFFF;
	display: table-cell;
	vertical-align: top;
	box-shadow: 0 0 7px -6px #000;
}
.map_container .container script { display: none; }

.map_container #hours_information {
	width: 180px;
	padding: 30px;
}

.map_container #hours_information h3, .map_container h2 {
	font-weight: 700;
	font-style: normal;
	color: #454545;
	text-decoration: none;
	text-transform: uppercase;
}

.map_container #hours_information .days, .map_container #hours_information .hours {
	color: #4d4d4d;
	font-size: .85em;
	font-weight: normal;
	line-height: 2em;
}
.map_container #hours_information .days { width: 50px; }
.map_container #hours_information .hours { width: 125px; }

.map_container .container .divider {
	width: 15px;
	background: none;
	border: none;
	box-shadow: none;
}

.map_container h2 { margin-bottom: 15px; }

#map_panel .directions_container {
	position: absolute;
	top: 27px;
	right: 30px;
}

.map_container .container #map_panel .directions_container * {
	display: inline-block;
	vertical-align: middle;
}

#map_panel .directions_container > input {
	border: 1px solid #cccccc;
	padding: 5px 10px 4px;
	width: 205px;
	font-size: .6em;
	line-height: 10px;
	color: #4c4c4c;
}

#map_panel .google_map { width: calc(100% - 2px)!important; height: 220px !important; }

.directions_container #directions_link {
	background: #2266bb;
	color: #FFF;
	font-size: .9em;
	font-weight: 800;
	padding: 4px 10px;
	vertical-align: middle;
	margin-left: -5px;
	text-decoration: none;
}

.map_container .container #map_panel {
	padding: 30px;
	position: relative;
}
/* END MAP AND INFO STYLES */


#long_description {
	width: 100%;
	border: none;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
	padding: 0;
	margin: 0;
}


/* LIGHTBOX STYLES */
.info { padding-bottom: 25px; }
.info > img {
	width: 225px;
	margin-right: 15px;
}
#DrivingDirections {
    width: 100%;
    overflow: scroll;
    position: relative;
    max-width: 1000px;
}
#DrivingDirections .panel-right { right: 0; }

.printbtn { background: #2266bb; }


/* COUPON STYLES */
.ben-coupon {
	width: calc(100% - 60px);
	max-width: 300px;
	border: 4px dashed #ccc;
}
.ben-coupon .coupon-contents {
	background: #faf8f6;
	padding: 30px;
}
.ben-coupon .terms {
	font-size: .7em; 
	line-height: 1.5em;
	border-top: 1px solid #ccc;
	padding: 30px;
}
.ben-coupon h1 {
	color: #c61537;
	font-size: 2.75em;
}
.ben-coupon h2 {
	color: #4d4d4d;
	text-transform: uppercase;
	margin-top: 5px;
}

/* BENJAMIN MOORE OFFER STYLES */
.benjaminmoore-coupon {
width: 100%;
max-width: 550px;
border: 1px solid #011538;
font-family: proxima-nova, sans-serif;
}

.benjaminmoore-coupon .contents {
background: #011538;
position: relative;
overflow: hidden;
}

.benjaminmoore-coupon .contents .left {
width: calc(60% - 50px);
padding: 25px;
background: #1b385d;
text-align: center;
color: #FFFFFF;
font-size: 1em;
}

.benjaminmoore-coupon .contents .left .logo {
max-width: 50%;
display: block;
margin: 0 auto 20px;
}

.benjaminmoore-coupon .contents .left h1 {
color: #ffffff;
text-transform: uppercase;
font-family: proxima-nova, arial, sans-serif;
font-size: 6em;
font-weight: normal;
line-height: .8em;
}

.benjaminmoore-coupon .contents .left h2 {
text-transform: uppercase;
font-family: proxima-nova, arial, sans-serif;
font-size: 1.2em;
font-weight: normal;
}

.benjaminmoore-coupon .contents .right {
width: 40%;
position: absolute;
left: auto;
right: 0;
top: 0;
}

.benjaminmoore-coupon .terms {
background: #FFFFFF;
padding: 20px 25px;
font-size: .6em;
line-height: 1.5em;
}
