@charset "utf-8";

@font-face {
    font-family: 'PFDinDisplayProBlack';
    src: url('fonts/dinpro-black-webfont.eot');
    src: url('fonts/dinpro-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/dinpro-black-webfont.woff') format('woff'),
         url('fonts/dinpro-black-webfont.ttf') format('truetype'),
         url('fonts/dinpro-black-webfont.svg#dinpro-black-webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'PFDinDisplayProRegular';
    src: url('fonts/dinpro-regular-webfont.eot');
    src: url('fonts/dinpro-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/dinpro-regular-webfont.woff') format('woff'),
         url('fonts/dinpro-regular-webfont.ttf') format('truetype'),
         url('fonts/dinpro-regular-webfont.svg#dinpro-regular-webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* BASE TYPOGRPHY */
body {
    font-family: PFDinDisplayProRegular, Arial, Helvetica, sans-serif;
    font-size: 14px; /* This overrides the browsers default font size */
    line-height: 16px; /* If you change the font-size make sure you change the line-height value as well - the usual ratio is around 1.5 (font-size x 1.5 = line-height) */
    margin-bottom: 20px;
    color: #ffffff;
	background-color: #295f79;
	padding-top: 128px;
	margin-bottom: 128px;
}
	body a { text-decoration: none; color: #f9f49a; } /* this removes the underline from all links */
	body a:link { -webkit-tap-highlight-color: #f9f49a } /* this sets the highlight color when links are tapped on Safari (browser) on iPhone */
	body a:hover { color: #b9ce5e; } /* this removes the underline from all links */

/* HEADERS */
.typography h1,
.typography h2,
.typography h3,
.typography h4,
.typography h5,
.typography h6 {
    font-family: PFDinDisplayProRegular, Arial, Helvetica, sans-serif; /* This references one of the custom @font-face fonts - the other fonts that are referenced are fallbacks for browsers that don't support @fontface */
    font-weight: normal;
    margin: 0px;
    color: #ffffff;
}
.typography h1 span,
.typography h2 span,
.typography h3 span,
.typography h4 span,
.typography h5 span,
.typography h6 span {
	font-family: PFDinDisplayProBlack;
}
.typography h1 {}
.typography h2 { font-size: 24px; line-height: 25px; margin-bottom: -5px; color: #f9f49a; }
.typography h3 { font-size: 26px; line-height: 27px; margin-bottom: 10px; margin-top: 0; }
.typography h4 { font-size: 18px; line-height: 20px; color: #f9f49a; }
.typography h5 { font-size: 16px; line-height: 18px; }
.typography h6 { font-size: 14px; line-height: 16px; }

/* PARAGRAGHS */
.typography  p { 
    font-family: PFDinDisplayProRegular, Arial, Helvetica, sans-serif;
	font-size: 14px; line-height: 16px; margin: 0 0 2px;
}

/* DOCUMENT STYLES */
hr {
	border: 0;
	height: 1px;
	background-color: #f9f49a;
}
p > span {
	color: #f9f49a;
}
a {
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
img {
	border: none;
}
ul {
	margin-left: 0;
}
ul li {
	list-style: none;
}
.row.relative {
	position: relative;
}
.map {
	position: absolute;
	top: -128px;
	left: 0;
	z-index: 0;
}
.web {
	font-size: 18px;
}
.single-warehouse {
}
.single-warehouse hr {
	margin: 8px 90px 15px 0;
}

/* ========================================================================= */
@media only screen and (max-width: 40em) {
	body {
		padding-top: 27px;
		margin-bottom: 0;
		background: rgba(6, 67, 99, 0.85) url(../images/mobile-bg.jpg) no-repeat center top;
		background-attachment: fixed;
	}
	.typography h4 { font-size: 17px; line-height: 19px; }
	
	img.logo {
		width: 60%;
		margin-bottom: 25px;
	}
	.info-left.text-right {
		text-align: left !important;
	}
	.info-left h3 {
		font-size: 18px;
		line-height: 18px;
	}
	.text-right {
		text-align: center !important;
	}
	.accordion .accordion-navigation,
	.accordion dd,
	.single-warehouse {
		margin-bottom: 5px !important;
	}
	.accordion .accordion-navigation>.content.active,
	.accordion dd>.content.active,
	.accordion-holder {
		background-color: rgba(74, 126, 152, 0.6);
		padding: 0;
	}
	.accordion .accordion-navigation.active>a,
	.accordion dd.active>a {
		background-color: rgba(2, 10, 14, 1);
	}
	.accordion .accordion-navigation>a,
	.accordion dd>a,
	.name {
		padding: 6px 8px;
		background-color: #083349;
		position: relative;
	}
	.accordion .accordion-navigation>a:hover,
	.accordion dd>a:hover {
		background-color: rgba(2, 10, 14, 1);
	}
	.address {
		padding: 8px;
	}
	.web {
		padding: 0 8px 12px;
		font-size: 16px;
	}
	a.name:after {
		content: "";
		display: block;
		position: absolute;
		right: 6px;
		top: 12px;
		width: 18px;
		height: 9px;
		background: url(../images/drop.png) no-repeat 0 0;
	}
	.single-warehouse.accordion-navigation.active a.name:after {
		background-position: 0 -9px;
		top: 11px;
	}
} /* max-width 640px, mobile-only styles, use when QAing mobile issues */
@media only screen and (max-device-width: 40em) and (orientation:landscape) {
	body {
		padding-top: 15px;
	}
	img.logo {
		width: 30%;
		margin-bottom: 15px;
	}
}

/* Medium screens */
@media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) and (orientation:portrait) {
	.map img {
		max-width: 88%;
	}
}
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
	body {
		padding-top: 47px;
		margin-bottom: 0;
		/*background: rgba(6, 67, 99, 0.85) url(../images/mobile-bg.jpg) no-repeat center top;
		background-attachment: fixed;*/
	}
	.typography h4 { font-size: 17px; line-height: 19px; }
	
	img.logo {
		width: 60%;
		margin-bottom: 35px;
	}
	.info-left.text-right {
		/*text-align: left !important;*/
	}
	.info-left h3 {
		font-size: 18px;
		line-height: 18px;
	}
	.text-right {
		/*text-align: center !important;*/
	}
	.accordion .accordion-navigation,
	.accordion dd,
	.single-warehouse {
		margin-bottom: 5px !important;
	}
	.accordion .accordion-navigation>.content.active,
	.accordion dd>.content.active,
	.accordion-holder {
		background-color: rgba(74, 126, 152, 0.6);
		padding: 0;
	}
	.accordion .accordion-navigation.active>a,
	.accordion dd.active>a {
		background-color: rgba(2, 10, 14, 1);
	}
	.accordion .accordion-navigation>a,
	.accordion dd>a,
	.name {
		padding: 6px 8px;
		background-color: #083349;
		position: relative;
	}
	.accordion .accordion-navigation>a:hover,
	.accordion dd>a:hover {
		background-color: rgba(2, 10, 14, 1);
	}
	.address {
		padding: 8px;
	}
	.web {
		padding: 0 8px 12px;
		font-size: 16px;
	}
	a.name:after {
		content: "";
		display: block;
		position: absolute;
		right: 6px;
		top: 12px;
		width: 18px;
		height: 9px;
		background: url(../images/drop.png) no-repeat 0 0;
	}
	.single-warehouse.accordion-navigation.active a.name:after {
		background-position: 0 -9px;
		top: 11px;
	}
} /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

/* Large screens */
@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

/* XLarge screens */
@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

/* XXLarge screens */
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */
