/* HTML5 Boilerplate  */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; }

::-moz-selection { background:#39c; color: #fff; text-shadow: none; }
::selection { background:#39c; color: #fff; text-shadow: none; }

a { color:#39c; text-decoration:none; }
a:visited { color:#39c; }
a:hover { color:#59c8ff; }
a:focus { outline:none; }
a:hover, a:active { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 0; padding: 0; }
li { list-style:none; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }

.cf:after, footer ul:after, #brands:after { content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0; }
.cf, footer ul { display:inline-block; }

/* page layout */
.wrap { width: 1060px; margin:0 auto; }

/* global style */
body { width: 100%; background:url(../img/arch-pattern.png); font-family: 'Signika', sans-serif; font-size:15px; line-height:20px; }

/* typography */
h1, h2, h3 { font-weight:700; }
h2 { color:#636466; font-size:36px; line-height:40px; margin:20 0px; }
h3 { font-size:18px; margin:0; }

/* header */
header { padding:47px 0; background:#fff; border-bottom:1px solid #efefef; }
#logo { display:block; text-indent:-9999em; background:url(../img/fbintl-logo.png); height:198px; width:318px; margin:0 auto; position:relative; }

/* main */
div[role=main] { padding:47px 0; }
#brands { margin-bottom: 40px; }
#brands > .row { margin-bottom: 30px; }
#brands section { text-align:center; position:relative; }
#brands .fancy { display:block; margin-bottom:20px; padding:9px; background-color:#fff; border:1px solid #ddd; }
#brands .fancy:hover { background-position: left bottom; }
#brands .fancy:focus { background:none; }
#brands .frame { display:block; overflow:hidden; position:relative; }
.frame img.primary { width: 100%; height: auto; }
#brands .shadow {display:none; height:20px; width:550px; background:url(../img/shadow.png) 0 0 no-repeat; position: absolute; top:510px; left:20px; }
#brands #fields { margin-right:40px; }
.fb-icon { position:absolute; bottom:-63px; right:23px; }
.home-intro { text-align: center; padding: 20px 0px; font-size: 1.2em; line-height: 1.3em; }
img.brand-img { width: 490px; height: auto; }
p.about { font-size: 1.2em; font-weight: normal; }

/* footer */
footer { background:url(../img/wood-pattern.jpg); color:#fff; }
footer ul { padding:41px 0; }
footer a, footer a:visited { color:#fff; }
footer a:hover { text-decoration:underline; color:#fff; }
footer li { float:left; height:187px; width:220px; padding-right:30px; margin-right:30px; border-right:1px dotted #fff; }
footer h3 { text-transform:uppercase; font-size:18px; margin-bottom:5px; }
footer p { margin:0 0 15px; }
footer .locate { width:498px; padding:0; margin:0; border:none; }
footer .locate .col { float:left; width:180px; margin-right:22px; }
footer .accessibility { margin: 10px auto 0px auto; width: 1060px; text-align: center; border-top: 1px dotted white; padding: 20px; }
#gmap { float:left; width:295px; }

/* Portrait */
@media only screen and (min-width: 770px) and (max-width: 1060px) {
	.wrap { width: 100%; margin: none; }
	#brands { clear: both; width: 100%; }
	#brands .brand { width: 50%; float: none; margin: 0px auto 20px auto !important; margin: 0px auto; }
	.wrap #brands img.brand-img { width: 100%; height: auto; }
	h2 { text-align: center; margin-top: 20px; }
	footer ul { padding: 10px 0px; }
	footer ul { width: 100%; }
	footer li, footer li.locate { width: 33%; display: block; height: auto; margin: 0px; text-align: center; border: none; }
	footer li .col { clear: both; width: 100% !important; float: none; }
	#gmap { float: none; width: 100%; }
	#gmap img { width: 100%; height: auto; }
	footer .accessibility { width: 100%; }
}

/* Responsive */
@media only screen and (min-width: 320px) and (max-width: 770px) {
	.wrap { width: 100%; margin: none; }
	header { width: 100%; margin: 0px; padding: 0px; }
	header h1 { width: 100%; margin: 0px; }
	h2 { text-align: center; margin-top: 20px; font-size: 30px; }
	#logo { width: 299px; height: 198px; margin: 0px auto 20px auto; }
	#brands { width: 100%; }
	#brands #fields { margin: 0px auto 20px auto; }
	.wrap #brands { text-align: center; }
	.wrap #brands .brand { width: 90%; display: block; margin: 0px auto; float: none; padding-bottom: 20px; }
	.wrap #brands img.brand-img { width: 100%; height: auto; }

	footer .locate { width: 100%; }
	footer .locate .col { float: none; width: 100%; }
	footer .accessibility { width: 100%; }
	footer ul { padding: 10px 0px; }
	footer ul, footer li { width: 100%; display: block; float: none; height: auto; text-align: center; border: none; }
	#gmap { float: none; width: 100%; }
}