/*
 * Main.css
 * ---------------------------------------------------------------------------
 * Main layout for Boot Repair Co. micro-sites
 * ---------------------------------------------------------------------------
 * Includes media queries for Responsive Design.  
 * These are on a 'mobile first' basis with breakpoints based on content.
 *
 */


/* ---------------------------------------------------------------------------
   BASE ELEMENTS
   --------------------------------------------------------------------------- */

body { 
	width: 100%; 
	height: 100%; 
	margin: auto;
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 14.4px; 
	line-height: 1.625em;
	color: #333; 
	background-color: #fff;
}

header{ }
main{ }
footer{ }

h1, h2, h3, h4, h5, h6 { 
	font-family: Arial, Helvetica, sans-serif; /* Default */
	font-weight: bolder;
	text-transform: uppercase;
}

h1 { 
	font-size: 2.9375em; /* 2.64em - Smaller size for mobile */ 
	line-height: 1.22em; /* 57px */ 
}
h2 { 
	font-size: 1.875em; 
	line-height: 1.3em; /* 39px*/ 
	margin: 0.865em 0;
}
h3 { 
	font-size: 1.5em; 
	line-height: 1.084em; /* 26px */ 
	margin: 1.08em 0;
}
h4 { 
	font-size: 1.1em;  /* 0.9375em */
	line-height: 1.72em; /* 26px */ 
	margin: 1em 0;
}
p { 
	font-size: 1.1875em;
	margin: 1.33em auto;
}
a { 
	font-size: inherit; 
	text-decoration: underline; 
	color: #333;
}
a:hover { text-decoration:none; }

menu, 
ol, 
ul { padding: 0; }

ul { 
	display: -webkit-box; 
	display: -ms-flexbox; 
	display: flex; 
	-ms-flex-wrap: wrap; 
	    flex-wrap: wrap; 
	-webkit-box-pack: justify; 
	   -ms-flex-pack: justify; 
	justify-content: space-between;
	text-align: justify;  /*Flexbox Fallback*/
	list-style-type: none;  
}

/* 
 * Flexbox Fallback 
 */
ul:after { 
	content:''; 
	display: inline-block; 
	width: 100%;
}
li { 
	display: inline-block; /*Flexbox Fallback*/ 
	width: 100%; 
}
img { 
	vertical-align: middle;
	max-width: 100%; 
	height: auto;
}
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}
/* Allow only vertical resizing of textareas */
textarea { resize: vertical; }

*, 
*:before, 
*:after { -webkit-box-sizing: border-box; box-sizing: border-box; }

.clearfix:before, 
.clearfix:after { content:"."; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; } 

::-moz-selection {
    background: #ccc;
    text-shadow: none;
}

::selection {
    background: #ccc;
    text-shadow: none;
}

/* ---------------------------------------------------------------------------
   GLOBAL STYLES
   --------------------------------------------------------------------------- */

.wrapper { 
	display: block; 
	clear: both; 
	max-width: 2280px; 
	min-width: 320px; 
	margin: 0 auto;
}
.content { 
	position: relative; 
	max-width: 1140px; 
	margin: auto;
}
.left{ float: left; }
.right{ float: right; }
.bold{ font-weight: bolder; }
.alt-link{ text-decoration: none; }
.alt-link:hover{ text-decoration: underline; }

.button{ 
	display: block; 
	max-width: 480px; 
	margin: 0 auto; 
	padding: 0.8125em;
	font-family: inherit; 
	font-weight: bold;
	font-size: 1.185em; /* 1.0625em */
	color: #fff;
	text-align: center; 
	text-decoration: none; 
	text-transform: uppercase;  
	background-color: #444; 
	border-radius: 3px; 
	-webkit-box-shadow: 0 1px 2px #555; 
	        box-shadow: 0 1px 2px #555; 
	-webkit-transition: background-color 0.2s ease; 
	-o-transition: background-color 0.2s ease; 
	transition: background-color 0.2s ease; 
}
.button:hover { background-color: #626262; }


/* ---------------------------------------------------------------------------
   SECTION STYLES
   --------------------------------------------------------------------------- */

/* ---------------------------------
               HEADER  
   -------------------------------*/

.top-section { 
	margin: 0 auto 5px; 
	text-align: center;
	background: url("../img/single-stitch-hz.png") bottom left repeat-x;
}
.logo { 
	display: block; 
	width: 100%; 
	height: 100px; /*125px*/
	padding: 0 18px; 
	/*background-color: #0cc;*/
}
.logo-box { 
	display: block; 
	max-width: 429px; /* 485px */
	height: 100%; 
	margin: auto; 
	padding-top: 2px; 
	font-size: 0; 
	text-align: center;
	white-space: nowrap;
}
/* 
 * To vertically align logo
 */
.logo-box:before { 
	content:''; 
	display: inline-block; 
	height: 100%; 
	vertical-align: middle; 
	/*margin-right: -0.25em;*/ 
} 
.logo-box a { font-size: 1em; }

.with { 
	padding: 0.875em 0 0.125em 0; 
	font-size: 0.875em; 
	line-height: 0.8125em;
	background: url("../img/single-stitch-hz.png") top left repeat-x;
}
.brand { 
	display: inline-block; 
	height: 100px; /* 116px */ 
	overflow: hidden;
}
.brand-left { 
	float: left;
	width: 49.5%; 
}
.brand-right { 
	float: right;
	width: 49.5%; 
}
.brand-box { 
	display: block; 
	max-width: 120px;
	height: 100%;
	font-size: 0; 
	text-align: center; 
	white-space: nowrap; 
}
.brand-box-left { 
	max-width: 169px; /* 204px */
	margin-left: auto; 
	margin-right: auto;
}
.brand-box-right { 
	max-width: 195px; /* 240px */
	margin-left: auto; 
	margin-right: auto;
}
/* 
 * For vertically centering logo images 
 */
.brand-box:before { 
	content:''; 
	display: inline-block; 
	height: 100%; 
	vertical-align: middle;
} 
.brand-box a { font-size: 1em; }

.stitch-divide {
	display: block; 
	width: 1px; 
	height: 65px; /* 82px */
	margin-top: 14px; 
	background: url("../img/single-stitch-vt.png") top left repeat-y;
}
.stitch-divide.right { display: none; }


/* ---------------------------------
               BANNER  
   -------------------------------*/

.banner { 
	display: block; 
	max-width: 2280px;  
	background-color: #ccc;
	overflow: hidden; 
}
.banner-img {
	position: relative; 
	left: 50%; 
	width: 2280px; 
	height: 455px; /* 520px */
	margin-left: -1140px;
	background-color: #666;
	/*background: url("../img/template/hero-banner.jpg") top center no-repeat;*/ /* Specify background image in Brand stylesheet */
	overflow: hidden;
}
.banner-bg {
	/*min-height: 221px;*/ 
	background-color: #aaa;
}
.banner-col { 
	display: block; 
	width: 100%; 
	min-height: 130px;
}

.hero-h1 { 
	position: absolute; 
	top: -441px; /* 499px */
	left: 0; 
	padding: 0 12px 0 0;
}
.hero-txt { padding: 104px 12px 18px 0; }

.hero-txt p { 
	font-size: 1.3125em; 
	color: #fff; 
}
.hero-txt p span { color: #222; }

.hero-img { 
	position: absolute; 
	top: -260px; 
	bottom: auto; 
	right: 0; 
	max-width: 360px; 
	padding: 0 12px; 
	/*background-color: rgba(255,255,255,0.1);*/ /* Not needed. Purely to help with placement */
}
.info-txt {
	padding: 9px 0 18px;
	background: url("../img/single-stitch-hz-white.png") top left repeat-x; 
}
.info-txt p { line-height: 1.263em; }
.info-txt a { color: #fff; }

.hero-h1, 
.hero-txt, 
.info-txt { padding-left: 12px; }


/* ---------------------------------
               FEATURED             
   -------------------------------*/

.featured { 
	background-color: #f8f7f3; 
	text-align: center;
}
.featured-main { padding: 1.94em 12px 4.2em 12px; } /* top 31px */ /* bottom 67px */ 
.featured-items { margin: 3.75em 0; } /* Approx 65px */
.featured-items li {
	/*padding:0 0 38px;*/
	text-align: left; 
	background-color: #fff;  
}
.featured-items li { margin-bottom:1.625em; } /*26px*/ 
.featured-items li:nth-child(3) { margin-bottom:0; }

.featured-item-info{ padding: 0.125em 31px 2.25em; }

.featured-list { 
	margin-top:3.125em; 
	margin-bottom:3.25em; /* Approx 52px */
}
.featured-list li { 
	padding: 12px; 
	text-align: center;
	border-bottom: 1px solid #bababa;
}
.featured-list li:nth-child(-n+1) { border-top: 1px solid #bababa; }
.featured-list li a {
	font-size: 1.11em; /* inherit */ 
	text-decoration:none; 
}
.featured-list li a:hover { text-decoration:underline; }


/* ---------------------------------
               FOOTER  
   -------------------------------*/

.footer-main { padding: 4.0625em 0; }
.footer-main li { 
	margin-bottom: 2.45em; /* 39px */ 
	padding: 0 8px 1.5em 3px;
	vertical-align: top; 
	text-align: center;
	word-wrap: break-word;
}
.footer-main li:nth-child(-n+3) { background: url("../img/double-stitch-hz.png") bottom left repeat-x; }

.footer-logo-box{ 
	max-width: 416px; 
	margin: 0 auto;
}
.footer-main h4, 
.footer-main p { padding: 0 9px;}

.footer-main p { 
	font-size: 0.875em; 
	margin: 0.94em auto; 
}
.footer-main a { font-size: inherit;}

.footer-end {
	padding: 2.79em 12px; /* 39px */
	font-size: 0.875em;
	text-align: center; 
	background-color: #626262;  
}
.footer-end a { 
	font-size: inherit; 
	text-decoration: none;
}
.footer-end a:hover { 
	text-decoration:underline; 
	color:#ddd;
}


/* ---------------------------------------------------------------------------
   EXTRAS
   --------------------------------------------------------------------------- */

/*  ACCORDION  */

.more-info, 
.more-info-header { cursor: pointer; }

.more-info-content, 
.js .more-info-content { display: none; }

.no-js .more-info-content { display: inline; }
.open { color: #999; } /* just to indicate that its open */
.more-info:after { content:'[\02795]'; font-size: 13px; margin-left: 0.85em; vertical-align: top; }
.more-info.open:after { content:'[\2796]'}

/*  OUTDATED BROWSER - Additional styling  */

#btnCloseUpdateBrowser { border: none; background-color: transparent; }
#btnCloseUpdateBrowser:hover { cursor: pointer; }
#btnCloseUpdateBrowser span { position: relative; top: -9px; left: -8px; color: #fff; }



/* ---------------------------------------------------------------------------
   MEDIA QUERIES
   --------------------------------------------------------------------------- */

@media only screen and (min-width: 420px){
	/* .logo { background-color: #aaa; }*/ /* Only used to indicate size changes during build */
	
	/* h1 { font-size: 2.9375em; } no longer needed */
	.hero-img { top: -286px; max-width: 390px; } /* Top -299px */
}

@media only screen and (min-width: 480px){
	/* .logo { background-color: #cc0; } */ /* Only used to indicate size changes during build */
	
	.hero-img { top: -325px; max-width: 440px; } /* Top -351px */
	.hero-txt { padding-top: 136px; }
}

@media only screen and (min-width: 660px){
	/*.logo{ background-color: #c0c; } */ /* Only used to indicate size changes during build */
	
	.hero-h1 { /*top: -420px;*/ } /* -486px */
	.hero-img {
		top: -345px; /* -369px */
		right: 0; 
		max-width: 455px;  /* 480px */
		padding: 0; 
		margin-right:52px; /* 0 */
	}
	.hero-h1, 
	.hero-txt, 
	.info-txt { 
		padding-left: 16px; 
		padding-right: 52px; 
	}
	.featured-main p { max-width: 780px; }
	.featured li { width:49%; } 
	.featured-list li:nth-child(-n+2) { border-top: 1px solid #bababa; }
	
	.footer-main li { width:50%; } /* weird ie9 sizing? may need 49.5% */
	.footer-main li:nth-child(odd) { background: url("../img/double-stitch-vt.png") top right repeat-y; }
	.footer-main li:nth-child(2) { background: none; }
}

@media only screen and (min-width: 960px){
	/* .logo { background-color: transparent; } */ /* Only used to indicate size changes during build */
	
	.logo { 
		width: 52.5%;
		display:inline-block; /* Google Chrome screen resize issue. Switch from block to inline-block seems to fix. */
	}
	.brand { height: 100px; } /* 125px */
	.brand-left { width: 21.25%; }
	.brand-right { width: 26.0%; }
	.brand-box-left { 
		margin-left: 0; 
		margin-right: auto; 
	}
	.brand-box-right { 
		margin-left: auto; 
		margin-right: 22px; 
		padding-top: 3px;
	}
	.hide { display: none; }
	.stitch-divide { margin-top: 19px; } /* 23px */
	.stitch-divide.right { display: block; }
	
	.banner-content { 
		position: absolute; 
		top: -200px; 
	}
	.banner-col { width: 47%; }
	
	.hero-h1 { 
		top: -399px; /* -445px */
		padding-right: 0; 
	}
	.hero-img {
		top: auto; 
		bottom: 49px; 
		max-width: 513px; /* 570px */
	}	
	.hero-txt { 
		position: absolute; 
		top: -265px; /*-298px */
		padding-top: 0; 
	}
	.info-txt { background: none; }
	
	.hero-txt, 
	.info-txt{ padding-right: 26px; }
	
	.narrow { letter-spacing:-0.06em;}
}

@media only screen and (min-width: 1020px){
	.featured li { 
		width: 32.5%; 
		max-width: 350px;
	}
	.featured-items li { margin-bottom: 0; }
	.featured-list li:nth-child(-n+3) { border-top: 1px solid #bababa; }
	
	.footer-main li { 
		width: 25%; /*weird ie9 sizing? may need 24.5%*/ 
		max-width: 285px; 
		margin-bottom: 0; 
		padding-bottom: 1em;
	}
	.footer-main li:nth-child(-n+3) { background: url("../img/double-stitch-vt.png") top right repeat-y; }	
}

@media only screen and (min-width: 1110px){
	.hero-h1, 
	.hero-txt, 
	.info-txt { padding-left: 12px; }
	
	.featured-main { padding-left: 7px; padding-right: 7px; }
	.featured li { width: 33.33%;}
}

/* BIG Screens */
@media only screen and (min-width: 1900px){
	
	body { font-size: 16px;	}
	
	h4 { font-size: 0.9375em; }
	p { font-size: 1.1875em; }
	.button{ font-size: 1.0625em; }
	
	.logo { height: 125px; }
	.logo-box { max-width: 485px; }
	.brand { height: 116px; }
	.brand-box-left { max-width: 204px; }
	.brand-box-right { max-width: 240px; }
	.stitch-divide { height: 82px; }
	
	.banner-img { height: 520px; }
	.banner-col { width: 50%; }
	.hero-img { 
		max-width: 570px; 
		margin-right:0; 
	}
	.hero-h1 { top: -458px; }
	.hero-txt { top: -311px; }
	
	.featured-list li a { font-size: inherit; }	
}


/* ---------------------------------------------------------------------------
   PRINT STYLES
   --------------------------------------------------------------------------- */

@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        -webkit-box-shadow: none !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) ")"; }

    /*
     * Don't show links for images, or javascript/internal links
     */
	
	.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; }
}