/*------------------------------------*\
    SITE CORE
\*------------------------------------*/
html {/*overflow-x: hidden!important;overflow-y:scroll;*/}
html,body {
	font-family: 'PTSans', Arial, Helvetica;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
.wrapper {
	width: 100%;
	margin: 0;
	position: relative;
}
.frame {position: relative; width: 100%; max-width: 1280px; margin: 0 auto;}
header {
	background: #000 url(../media/layout/top-gradient.jpg) top center no-repeat;
	background-size: 100% 120px;
}
header .frame {margin: -80px auto 0 auto;}

.container {width: 100%; max-width: 1080px; margin: 0 auto; clear: both;}
.container .inner {padding: 30px;}
#content {
	background: #202020 url(../media/layout/section-bg.png);
	min-height: 300px;
}
#content .container {background: #ECE7D5;}
/* custom backgrounds */
.gallery #content .container,
.frame-the-badge #content .container {background: #000;}

article {clear:both;}

/*SPECIALTY CONTENT*/
.home #content {padding: 0 0 20px;}
.home #content .container {padding: 60px 0 40px; background: #000;}

.gal-thumbs {padding-right: 40px;}
.gal-thumbs a img {margin: 4px;}
.gal-feature {margin-top: 124px;}

h3.gal-subtitle {
	margin: 24px 0 0;
	padding: 0 0 2px 4px;
	font-size: 17px;
	color: #ddd;
	text-transform: uppercase;
}
h3.gal-subtitle:first-child {margin-top: -8px;}
p.gal-desc {font-size: 12px; margin: 2px 0 30px; color: #ddd;}
.inner-title {font-family: 'KaushanScript';}
.inner-title-img {margin-left: 10%; padding-bottom: 0;}

.contact-box {
	display: none;
	position: absolute;
	z-index: 400;
	left: 0;
	width: 240px;
}

#contact_tab {
	float: left;
	background: #57230B;
	width: 35px;
	height: 94px;
	cursor: pointer;
	z-index: 400;
}

#contact_tab > span {
	display: inline-block;
	margin: 37px 0 0 -16px;
	font-size: 18px;
	color: #fff;
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
.addr_box{
	display: none;
	position: relative;
	float:left;
	overflow: hidden;
	background: #D7A039;
	z-index: 400;
}
.addr_inner{
	width: 130px;
	height: 62px;
	padding: 16px;
	font-size: 16px;
}

/*TEMPORARY*/


/*------------------------------------*\
    UTILITIES
\*------------------------------------*/
.nofloat {float:none!important;}
.floatR {float:right;}
.span, .floatL {float:left;}
.center {text-align: center;}

.clearfix:before,
.clearfix:after {content:' '; display:table; clear:both;}

.hidden {visibility: hidden;}
.add-line-height {line-height: 28px!important;}

/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/
/* grid */
.one {width:6.25%;}
.two {width:12.5%;}
.three {width:18.75%;}
.four {width:25%}
.five {width:31.25%;}
.six {width:37.5%;}
.seven {width:43.75%;}
.eight {width:50%;}
.nine {width:56.25%;}
.ten {width:62.5%;}
.eleven {width:68.75%;}
.twelve {width:75%;}
.thirteen {width:81.25%;}
.fourteen {width:87.5%;}
.fifteen {width:93.75%;}
.sixteen {width:100%;}

.one-third {width: 33.3333%;}
.two-thirds {width: 66.6666%;}


/*------------------------------------*\
    FORMATTING ELEMENTS
\*------------------------------------*/
img {max-width:100%;}

h1,h2,h3,h4,h5,h6 {
	margin: 0;
	padding: 20px 0;
	font-family: 'PTSans Narrow';
	font-weight: normal;
}
h1 {font-size:34px;}
h2 {font-size:28px;}
h3 {font-size:22px;}
h4 {font-size:18px;}
h5 {font-size:16px;}
h6 {font-size:15px;}

a, input, textarea {transition: all 0.3s ease 0s;}
a {color: #989289; text-decoration: none;}
a:hover {color: #CC682A;}

#content li {line-height: 160%;}

hr.fancy-divider {
	background: url(../media/layout/fancy-divider.png) top center no-repeat;
	border: 0;
	padding: 16px 0;
}
hr.hrdark {
	border: 0;
	background-color: #CD943E;
	height: 1px;
	margin-top: 20px;
}
.mobile-divider {
	background: #98957B;
	color: #fff;
	font-size: 12px;
	text-align: center;
	padding: 4px 0;
	margin: 10px 0;
	background:
}
.noliststyle {list-style: none;}

.content-img {margin-right: 30px;}


/* custom margins and padding */
.mrg40 {margin: 0 40px;}
.mrg50 {margin: 0 50px;}
.mrg60 {margin: 0 60px;}

.pad40 {padding: 0 40px;}
.pad50 {padding: 0 50px;}
.pad60 {padding: 0 60px;}

/*------------------------------------*\
    GLYPH'S
\*------------------------------------*/
.phone-glyph, .email-glyph, .addr-glyph, .clock-glyph, .nav-glyph {
	position: relative;
	padding: 11px;
}

.phone-glyph {
	background: url(../media/layout/glyph-phone.png) center left no-repeat;
	background-size: contain;
}
.email-glyph {
	background: url(../media/layout/glyph-email.png) center left no-repeat;
	background-size: contain;
}
.addr-glyph {
	background: url(../media/layout/glyph-addr.png) top left no-repeat;
	background-size: contain;
	margin-top: 6px;
	float: left;
}
.clock-glyph {
	background: url(../media/layout/glyph-clock.png) center left no-repeat;
	background-size: contain;
}
.nav-glyph {
	background: url(http://grizzlycreekframing.com/media/layout/glyph-nav.png) center left no-repeat;
	background-size: contain;
}

/*------------------------------------*\
    HEADER, FOOTER & SIDEBAR
\*------------------------------------*/
/*Header*/
header {position: relative;}

#main-logo {
	background: url(../media/layout/gcf-logo-bar.png) center center no-repeat;
	background-size: 100% 46px;
	margin: 20px 0 100px;
	text-align: center;
}
#main-logo img {position: relative; width: 100%; max-width:260px; z-index: 200;}

header #badge {width: 411px; margin: 0 0 12px 0; float: left;}
header #badge img {
	width: 378px;
	height: 96px;
}
header .pawprints {
	position: absolute;
	top: -198px;
	left: 0;
	background: url(../media/layout/bear-paws3e.png) top left no-repeat;
	padding: 175px 190px 175px 0;
	z-index: 150;
	overflow: hidden;
}
/* (right side)
header .pawprints {
	position: absolute;
	top: -240px;
	right: -30px;
	background: url(http://grizzlycreekframing.com/media/layout/bear-paws3a.png) top left no-repeat;
	padding: 175px 190px;
	z-index: 250;
}
*/
/*Footer*/
footer {
	/*margin-top: -200px;*/
	color: #eee;
}
#footer-main {background: #695441; text-align: center; padding: 20px 0;}
footer .contact-info {
	text-align: left;
	font-size: 15px;
}
footer h1 {padding: 0;}
footer .contact-info ul {list-style: none;}

.footer-contact-title {line-height: 32px; font-weight: bold; letter-spacing: 0.040em;}
.footer-phone a, 
.footer-email a {padding-left: 8px; line-height: 32px; color: #FFF; font-size: 14px;}
.contact-addr {padding:8px 0 0 8px; float: left; color: #FFF; white-space: nowrap; font-size: 14px;}


.location {
	margin-bottom: 34px; 
	font-family: 'Oswald';
		font-size: 15px;
	letter-spacing: 0.040em;
	}
.hours-header {padding-left: 8px; font-weight: bold; color: #FFF; font-size: 15px; letter-spacing: 0.040em}
.hours {
	width: 190px;
	font-size: 14px;
	margin: 10px auto 0 auto;
	padding-left: 48px;
	text-align: left;
	white-space: nowrap;
}
.hours1, .hours2 {
color: #FFF;
}

.map-icon {margin-top: 30px;}
.map-icon a img {transition: all 0.3s ease 0s;}
.map-icon a:hover img {opacity: .6;}


#footer-bottom {
	background: #3B3935;
	font-size: 12px;
	padding: 6px 0 8px;
}
#footer-bottom .copy {text-align: center;}

/*SIDEBAR*/





/*------------------------------------*\
    SITEWIDE: CONTENT AREA
\*------------------------------------*/
h1.page-title, h2.page-title {
	margin-top: 0;
	padding: 0 0 10px;
	font-family: 'HoneyScript SemiBold';
	font-weight: normal;
	letter-spacing: normal;
}
h1.page-title {
	font-size: 44px;
	color: #CD943E;
	text-align: center;
}
h1.page-title i {position: relative; bottom: 4px; font-size: 14px;}
h2.page-title {
	font-size: 40px;
	color: #551c22;
}
.gallery h1.page-title {text-align: left;}

/* headlines with lines */
.line{overflow: hidden; text-align: center;}
.line > span{position: relative; display: inline-block;}
.line > span:before, .line > span:after{
    content: '';
    position: absolute;
    top: 50%;
    border-bottom: 2px solid;
    width: 100px; /* half of limiter */
    margin: 0 20px;
}
.line > span:before{right: 100%;}
.line > span:after{left: 100%;}


/*------------------------------------*\
    NAVIGATION
\*------------------------------------*/
#header-nav {
	position: relative;
	width: 100%;
	padding: 10px 0;
	background: #746f4c;
	text-align: center;
	z-index: 300;
}

#header-menu {margin: 0;}
#header-menu li {list-style: none;}
#header-menu > li {display: inline-block;}
#header-menu > li > a {
	font-family: 'PTSans Narrow';
	font-size: 16px;
	color: #fff;
	padding: 10px 12px;
	text-transform: uppercase;
	letter-spacing: 0.055em;
}

#header-menu > li:hover > a,
#header-menu > li.active > a {
	background: #a89a7e;
	color: #fff;
}
#header-menu > li.active > a {
	-webkit-box-shadow: inset 0px 0px 16px 0px rgba(17,17,17,1);
	-moz-box-shadow: inset 0px 0px 16px 0px rgba(17,17,17,1);
	box-shadow: inset 0px 0px 16px 0px rgba(17,17,17,1);
}
/*
li.pad-custom > a {
	border-top: 2px solid transparent;
	border-right: 2px solid transparent;
	border-left: 2px solid transparent;
}
li.pad-custom:hover > a,
li.active.pad-custom > a {
	border-top: 2px solid #202020;
	border-right: 2px solid #202020;
	border-left: 2px solid #202020;
}
*/
/*SUBMENUS*/
#header-menu > li:hover .am-canvas,
#header-menu > li.active .am-canvas,
#header-menu > li:hover .dropdown {display: block;}
.am-canvas {width: 600px; margin-left: -1px; padding-left: 18px; padding-bottom: 53px;}
.am-canvas,
.dropdown {
	position: absolute;
	margin-top: 10px;
	background: #D8D1BA;
	border: 2px solid #202020;
	z-index: 48;
}
.dropdown {min-width: 120px;}

.am-canvas a,
.dropdown a {
	font-family: 'PTSans';
	font-size: 12px;
	line-height: 20px;
	padding: 4px 8px 4px 4px;
}

.am-canvas .submenu {padding: 10px 0 0 0;}

.submenu.block1 {width: 170px; float: left;}
.submenu.block2 {width: 390px; float: left;}

.dropdown {padding: 0 0 14px 0;}
.dropdown .submenu {padding: 8px 0 0 0;}
.dropdown .submenu li {width: 86px; padding: 0 28px 0 20px;}

.am-canvas,
.dropdown,
.submenu-2nd {display: none; text-align: left;}

.submenu li.has-child > a:after {
	position: absolute;
	content: " \00BB";
	font-size: 16px;
	margin-left: 30px;
	font-weight: bold;
}
.submenu > li > a {color: #202020;}
.submenu > li.current > a {color: #CD6828; font-weight: bold;}
.submenu > li.has-child {background: #CD6828;}
.submenu > li.has-child > a  {color: #000;}
.submenu > li:hover {background: #CD6828;	color: #000;}
.submenu .has-child li:hover a {color: #000;}
.submenu .has-child li.current a {color: #000; font-weight: bold;}

/*2nd SUBMENU*/
.submenu-2nd {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	background: #CD6828;
	border: 1px solid #ccc;
	display: block;
	padding: 8px 20px 8px 30px;
	float: right;
}
.submenu-2nd li.current {
	margin-left: -14px;
}
.submenu-2nd li.current:before {
	position: relative;
	top: 2px;
	left: -4px;
	content: '\025B8';
	font-weight: bold;
}

.submenu-2nd li a {color: #fff;}


/*------------------------------------*\
    FORM ELEMENTS
\*------------------------------------*/
input, textarea {
	background: #fff;
	border: 1px solid #9B744E;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

input[type=text],input[type=email], textarea {
	padding: 8px;
	width: 92%;
}
input:focus,
textarea:focus,
button:hover,
input[type=submit]:hover {
	background: #F2E3C2;
	border: 1px solid #C00;
}
button, input[type=submit] {
	padding: 8px 20px;
	margin-right: 4%;
	cursor: pointer;
	float: right;
}
#url_addr {display: none;} /*Honeypot Security*/
.alert-contact {color: #000;}
.error-contact {color: #C00;}
.success-contact {color: #090;}

/* Z-index of #mask must lower than #boxes .window */
#mask {
  position:absolute;
  z-index:9000;
  background-color:#000;
  display:none;
}
#boxes .window {
  position:fixed;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}

/* Customize your modal window here, you can add background image too */
#boxes #dialog {
  width:375px; 
  height:203px;
}


/*------------------------------------*\
    PAGE-SPECIFIC FORMATTING
\*------------------------------------*/
/*MULTIPLE PAGES*/
.services #content,
.about #content,
.press #content,
.contact #content,
.frame-the-badge #content {padding: 20px 0 40px;}

/*HOME PAGE*/
.hp-address, .gal-hp-address {
	position: absolute;
	left: -10px;
	font-family: 'PTSans Narrow';
	font-size: 18px;
	color: #b3b5a6;
	text-align: right;
}
.hp-address {top: 0;}
.gal-hp-address {top: 14px;}

.home #content .four.first {margin: 0 2% 0 10.5%;}
.home #content .four.last {margin: 0 10.5% 0 2%;}
.contact-card img {
	width: 68%;
	margin-right: 4%;
}

/*ABOUT*/
.about .inner-title.title-two {
	margin-left: 10%;
	color: #843233;
}
.about #content p {
	font-family: 'PTSans Narrow';
	padding-left: 20px;
	font-size: 17px;
}
p.feature-para {
	line-height: 140%;
	font-size: 18px!important;
	margin-bottom: 30px;
}
.about .bio-box {
	padding: 20px;
	border: 1px solid #fff;
	background: url(../media/layout/canvas-bkgd_02.jpg) top left;;
	-webkit-box-shadow: 5px 5px 10px 0px rgba(153,153,153,1);
	box-shadow: 5px 5px 10px 0px rgba(153,153,153,1);
	clear: both;
	margin: 0 10% 20px 10%;
}
.about .bio-img {margin-top: 16px;}
.about .bio-desc {
	border-left: 1px solid #000;
	margin-left: 24px;
}
.about span.highlight {
	font-weight: bold;
	color: #843233;
}


/*SERVICES*/
.services h2.page-title {
	width: 275px;
}
.services h2.page-title span {
	float: right;
}
.services #content .container {max-width: 1000px; background: #BDBEC0;}
.services #content .container .inner {padding-right: 60px;}
.services h4 {color: #CD943E; font-weight: bold;}
.services #content a {
	color: #000;
	text-decoration: underline;
}
.services #content a:hover {color: #CD6828;}
.services #content h3, .services #content .container {color: #000000;}
.services #content h3 {color: #000000;}
.services #content .container {color: #5b5d61;}

.index-services #content .container,
.index-frame-the-badge #content .container {
	max-width: 1000px;
	background: #fff;
	color: #202020;
}
.services .custom-margin {margin: 0 35px 0 20px;}
.services .custom-margin2 {margin: 0 75px 0 50px;}

.services .pricing-box {
	background: #D1CDC1;
	margin: 30px 50px 30px 20px;
	font-family: 'PTSans Narrow';
	color: #000;
	border: 2px solid #FAF9F5;
	-webkit-border-radius: 15px;
	border-radius: 15px;
}
.services .pricing-box ul {
	margin: 0 26px 30px -14px;
	list-style: none;
}
.services .pricing-content li {
	font-size: 14px;
	line-height: 18px!important;
}
.services .pricing-content li.p1 {
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 6px;
}
.services .pricing-content li.p2 {
	margin-bottom: 4px;
}
.services .pricing-content h5 {
	font-size: 18px;
	font-weight: bold;
	color: #843233;
	margin-left: 20px;
}

/*FRAME THE BADGE*/
h2.ftb-title, h4.ftb-highlight, h4.ftb-highlight2 {
	font-family: 'PTSans';
	font-weight: bold;
	padding: 10px 0 0;
}
h2.ftb-title {color: #283590;}
h4.ftb-highlight {color: #CE963E;}
h4.ftb-highlight2 {color: #CE963E; font-size: 17px;}
.ftb-img-left {float: right; margin-right: 30px;}
.ftb-img-right {
	text-align: center;
	color: #283590;
	font-weight: bold;
}
.ftb-right {padding: 0 20px; border-left: 1px solid #000;}
.ftb-left {padding-right: 40px;}
.ftb-left ul {margin-top: 6px;}
.ftb-left ul li {line-height: inherit!important; margin-bottom: 14px;}
.ftb-left ul.noliststyle li {margin-bottom: 0;}

.press iframe {
	border: none;
	width: 100%;
	height: 300px;
}
.press #content button {float: right;}

p.enlarge {font-size: 11px; color: #B2B4A4; text-align: center; margin-top: 2px;}
p.enlarge a {text-decoration: none!important;}


/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/
@media only screen and (max-width:1280px) {
	.contact-box {display: block;}
	.hp-address, .gal-hp-address {display: none;}
	.contact iframe {width: 100%!important;}
}

@media only screen and (min-width:980px) and (max-width:1024px) {

}

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

}

@media only screen and (min-width:768px) and (max-width:960px) {
	.am-canvas {width: 550px; padding-left: 6px;}
	.submenu.block1 {width: 160px;}
	.submenu.block2 {width: 192px;}
	.submenu-2nd {padding: 8px 20px 8px 10px;}
	.submenu-2nd li.current:before {left: 0px;}
}

@media only screen and (min-width:768px) {
	
}

@media only screen and (max-width:767px) {
	header {background-size: 100% 90px;}
	.contact-card img {
    width: 100%;
    margin-right: 0;
	}
	.about .inner-title.title-two {margin-left: 1%;}
	.about .bio-box {margin: 0 1% 20px 1%;}
	.our-store .six.floatR {width: 100%; float: none;}
	.our-store .mrg50 {margin: 0;}
	.our-store .span.five {text-align: center;}
	.our-store .span.five img {width: 70%;}
	
	.gallery .span.six,
	.gallery .span.ten {width: 100%; float: none; text-align: center;}
	.gallery h1.page-title {text-align: center; margin-bottom: 20px;}
	.gallery .gal-desc.hidden, .gallery .gal-subtitle.hidden {display: none;}
	.gallery .gal-feature {margin-top: 0;}
	.gallery .gal-thumbs {padding-right: 0;}
	
	.services #content .container .inner {padding-right: 30px;}
	
	footer .span.five, footer .span.six {
		width: 100%;
		float: none;
		clear: both;
	}
	footer .contact-info {width: 288px; margin: 0 auto;}
	footer .contact-addr {margin-bottom: 30px;}
}

@media only screen and (max-width:640px) {
#main-logo {
	background: url(../media/layout/frame-corners-cell.png) center center no-repeat;
	background-size: 100% 24px;
}
	#main-logo img {width: 40%;}
	.span.nine,
	.span.seven {
		width: 100%;
		float: none;
	}
	.about .span.three, .about .span.thirteen {width: 100%;	float: none;}
	.about .span.three {text-align: center;}
	.about .span.three.bio-img {max-width: 200px; margin: 0 auto;}
	
	.services h2.page-title {padding-bottom: 0; margin-top: 20px;}
	.services .content-img {margin-right: 0; text-align: center;}
}

@media only screen and (min-width:481px) and (max-width:767px) {

}

@media only screen and (max-width:555px) {
	.span.twelve,
	.span.eleven,
	.span.nine,
	.span.eight,
	.span.seven,
	.span.five,
	.span.four,
	.span.one-third {
		width: 100%;
		float: none;
	}
	.home .span.four {width: 25%; float: left;}
	.about .eleven {width: 100%;}
	.mrg50 {margin: 0;}
	.about .inner-title.title-two {margin-left: 0;}
	.about .bio-box {margin: 0 0 20px 0;}
	
	.services .span.four, .services .span.five {text-align: center;}
	.services .custom-margin, .services .custom-margin2 {margin: 0;}
	
	.ftb-img-left {float: none; margin: 0 auto; text-align: center;}
	.frame-the-badge .span.one-third {text-align: center;}
	
	.contact .inner {padding: 30px 0;}
	h3.inner-title {padding-left: 20px;}
	section#contact-form {padding-left: 20px;}
	.contact-card img {width: 80%;}
}

@media screen and (max-width:480px) {
	header {background-size: 100% 70px;}
	header .pawprints {display: none;}
	.container .inner {padding: 20px 10px;}
	h1.page-title {font-size: 38px;}
	.ftb-left {padding-right: 0;}

}


/*------------------------------------*\
    PRINT
\*------------------------------------*/

@media print {
	* {
		background:transparent !important;
		color:#000 !important;
		box-shadow:none !important;
		text-shadow:none !important;
	}
	a,
	a:visited {
		text-decoration:underline;
	}
	a[href]:after {
		content:" (" attr(href) ")";
	}
	abbr[title]:after {
		content:" (" attr(title) ")";
	}
	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content:"";
	}
	pre,blockquote {
		border:1px solid #999;
		page-break-inside:avoid;
	}
	thead {
		display:table-header-group;
	}
	tr,img {
		page-break-inside:avoid;
	}
	img {
		max-width:100% !important;
	}
	@page {
		margin:0.5cm;
	}
	p,
	h2,
	h3 {
		orphans:3;
		widows:3;
	}
	h2,
	h3 {
		page-break-after:avoid;
	}
}