/* Responsive CSS for Backdraft 1.5 */
/* Copyright Caleb Grove/OnRamp Web Design March 2014 */

/*----------------------------------------*/
/*
Welcome to the responsive CSS for Backdraft!

First, a word of warning: If you don't know how to write CSS, tread carefully. If you
break anything, though, it's easy to fix. Just remove the Backdraft page action from
the page that you applied it too, and Backdraft will revert to using the standard CSS
file.

Below you will find all the custom CSS that makes Backdraft tick. First, we have
the "default" breakpoint, which will apply to ALL breakpoints. After that, you will find
the various breakpoints in decending order, from larger display size to smaller, each
overriding the preceding breakpoints.

Now, let's look at something you might want to configure:

On line 246, you can set the font-sizes for mobile devices. By default, I've included the 
font-size for h1, h2, h3, p, and .navigation. To use, uncomment the line you want to 
activate then tweak the pixel value. Feel free to add your own classes from the "edit 
styles" dialog. For example, if the style name in Freeway is "alert" then you will want 
to write something like this:
.alert { font-size: 14px !important; }

When you are ready for the website to go live, I'd highly reccommend you minify a COPY
of this CSS file, then point the Backdraft action to that version. Here's a website that
will minify it for you: http://refresh-sf.com/yui/

Keep in mind that this will strip all the comments out and make the CSS practically
unreadable, so KEEP THE ORIGINAL FILE.

If you get stuck, or need a hand, feel free to contact me via 
http://backdraft.onrampwebdesign.com

Happy hacking!
*/
/*----------------------------------------*/
/* Default (This CSS applies to ALL breakpoints, unless overridden) */

/* Your custom CSS: */
#body1 {
		padding-top: 125px;
	}
/* End your custom CSS */

/* Keep mobile Safari from zooming in on rotate */
body { -webkit-text-size-adjust: 100%; }

/* Flexible images */
.flexImage, .fleximage {
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
}

/* Flexible width video */
#PageDiv .video-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed {
	position: absolute;
	width: 100%;
	height: 100%;
}

/* Card style width */
.card {
	width: 90%;
	margin: auto;
}

/* Hacking the CSS Menu action for altHead */
#PageDiv .inlineHeader .sub {
	visibility: visible;
	display: none; 
}
#PageDiv .inlineHeader .fwNavItem:hover > .sub {
	display: block;
}

/* Tweaking column widths so they have a 20px left margin start */
#PageDiv .threeMiddle, #PageDiv .threeMiddle.f-ms,
#PageDiv .fourMiddleLeft, #PageDiv .fourMiddleLeft.f-ms,
#PageDiv .fourMiddleRight, #PageDiv .fourMiddleRight.f-ms,
#PageDiv .fiveTwo, #PageDiv .fiveTwo.f-ms,
#PageDiv .fiveThree, #PageDiv .fiveThree.f-ms,
#PageDiv .fiveFour, #PageDiv .fiveFour.f-ms,
#PageDiv .fiveFive, #PageDiv .fiveFive.f-ms,
#PageDiv .sixTwo, #PageDiv .sixTwo.f-ms, 
#PageDiv .sixThree, #PageDiv .sixThree.f-ms,
#PageDiv .sixFour, #PageDiv .sixFour.f-ms, 
#PageDiv .sixFive, #PageDiv .sixFive.f-ms,
#PageDiv .sixSix, #PageDiv .sixSix.f-ms {
	margin-left: 1.7%;
}

/*----------------------------------------*/
/* 928px breakpoint (Netbook/iPad) */
@media screen and (max-width:928px) {

/* Your custom CSS here: */
	
/* End your custom CSS */

/* Card style width */
	.card {
		width: 93%;
	}

/* 3 column TRANSFORM to 2 column top, 1 column bottom */
	#PageDiv .threeLeft, #PageDiv .threeLeft.f-ms {
		width: 48.9%;
	}
	#PageDiv .threeMiddle, #PageDiv .threeMiddle.f-ms {
		width: 48.9%;
		float: right;
		margin-left: 0;
	}
	#PageDiv .threeRight, #PageDiv .threeRight.f-ms {
		clear: both;
		width: 100%;
		margin-top: 20px;
		margin-left: 0;
	}
	#PageDiv .three .flexImage {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

/* 4 column TRANSFORM to 2x2 */
	#PageDiv .four, #PageDiv .four.f-ms {
		width: 48.9%;
	}
	#PageDiv .fourMiddleLeft, #PageDiv .fourMiddleLeft.f-ms {
		float: right;
		margin-left: 0;
	}
	#PageDiv .fourMiddleRight, #PageDiv .fourMiddleRight.f-ms {
		clear: both;
		margin-top: 20px;
		margin-left: 0;
	}
	#PageDiv .fourRight, #PageDiv .fourRight.f-ms {
		float: right;
		margin-top: 20px;
		margin-left: 0;
	}
	#PageDiv .four .flexImage {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

/* 5 column TRANSFORM to 2 column top, 1 column bottom */
	#PageDiv .fiveOne, #PageDiv .fiveOne.f-ms,
	#PageDiv .fiveTwo, #PageDiv .fiveTwo.f-ms {
		width: 49.1%;
	}
	#PageDiv .fiveThree, #PageDiv .fiveThree.f-ms,
	#PageDiv .fiveFour, #PageDiv .fiveFour.f-ms,
	#PageDiv .fiveFive, #PageDiv .fiveFive.f-ms { 
		width: 32.2%;
		margin-top: 20px;
	}
	#PageDiv .fiveThree, #PageDiv .fiveThree.f-ms { 
		clear: both;
		margin-left: 0;
	}
	#PageDiv .five .flexImage {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

/* 6 column TRANSFORM to 3x2 */
	#PageDiv .six, #PageDiv .six.f-ms {
		width: 32.2%;
		margin-left: 1.7%;

	}
	#PageDiv .sixOne, #PageDiv .sixOne.f-ms, 
	#PageDiv .sixSix, #PageDiv .sixSix.f-ms {
		margin-left: 0;
	}

	#PageDiv .sixThree, #PageDiv .sixThree.f-ms  { 
		float: right;
		margin-left: 0;
	}

	#PageDiv .sixFour, #PageDiv .sixFour.f-ms  { 
		margin-left: 0;
		clear: both;
	}

	#PageDiv .sixFour, #PageDiv .sixFour.f-ms,
	#PageDiv .sixFive, #PageDiv .sixFive.f-ms,
	#PageDiv .sixSix, #PageDiv .sixSix.f-ms  {
		margin-top: 20px;
	}

	#PageDiv .six .flexImage {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

}

/*----------------------------------------*/
/* 570px breakpoint (mobile) */
@media screen and (max-width:570px) {

/* Your custom CSS here: */
	#body1 {
		padding-top: 225px;
	}	
/* End your custom CSS */

/* Font size for mobile devices (uncomment lines to use them) */
	/* #PageDiv h1 { font-size: 20px; } */
	/* #PageDiv h2 { font-size: 16px; } */
	/* #PageDiv h3 { font-size: 14px; } */
	/* #PageDiv p { font-size: 12px; } */
	/* #PageDiv .navigation { font-size: 14px; } */
	
	/* Card Style Width */
	.card {
		width: 95%;
	}

/* 2 column TRANSFORM to 1x2 */	
	#PageDiv .twoLeft, #PageDiv .twoLeft.f-ms  {
		width: 100%;
	}
	#PageDiv .twoRight, #PageDiv .twoRight.f-ms  {
		width: 100%;
		clear: both;
		margin-left: 0;
		margin-top: 20px;
	}
	#PageDiv .two .flexImage {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

/* 3 column TRANSFORM to 1x3 */
	#PageDiv .three, #PageDiv .three.f-ms  {
		width: 100%;
	}
	#PageDiv .threeMiddle, #PageDiv .threeMiddle.f-ms  {
		margin-top: 20px;
		margin-left: 0;
	}
	#PageDiv .threeRight, #PageDiv .threeRight.f-ms  { margin-left: 0; }

/* 6 Column TRANSFORM to 2X3 */
	#PageDiv .six, #PageDiv .six.f-ms { 
		width:48.2%;
		margin-left: 3.4%;
	}
	#PageDiv .sixOne, #PageDiv .sixOne.f-ms { 
		margin-left: 0;
	}
	#PageDiv .sixTwo, #PageDiv .sixTwo.f-ms
	#PageDiv .sixThree, #PageDiv .sixThree.f-ms {
		float: right;
		margin-left: 0;
	}
	#PageDiv .sixThree, #PageDiv .sixThree.f-ms { 
		clear: both;
		margin-top: 20px;
		margin-left: 0;
	}
	#PageDiv .sixFour, #PageDiv .sixFour.f-ms { 
		float: left;
		margin-left: 0;
		clear: none;
	}
	#PageDiv .sixFive, #PageDiv .five.f-ms { 
		clear: both;
		margin-left: 0;
	 }

/* Header */

	/* Global */
	#PageDiv .logoWrapper, #PageDiv .logoWrapper.f-ms {
		float: none;
		margin: auto;
	}
	#PageDiv .pageName, #PageDiv .pageName.f-ms {
		width: 100%;
		margin-left: auto;
		float: none;
		text-align: center;
	}

	/* Responsive Header */
	#PageDiv .responsiveHeader, #PageDiv .responsiveHeader.f-ms {
		padding: 14px;
	}

	/* Popup Header */
	#PageDiv .popupHeaderWrapper, #PageDiv .popupHeaderWrapper.f-ms {
		margin-top: 9px;
	}
	#PageDiv .popupHeader, #PageDiv .popupHeader.f-ms { 
		text-align: center;
		margin-top: 5px;
	}

	#PageDiv .popupHeader .mobileNavigation, #PageDiv .mobileNavigation.f-ms {
		float: none;
		display: block;
		margin: auto;
		clear: both;
	}

	/* Inline Header */
	#PageDiv .inlineHeaderWrapper, #PageDiv .inlineHeaderWrapper.f-ms {
		margin-top: 9px;
	}
	#PageDiv .inlineHeader, #PageDiv .inlineHeader.f-ms { 
		text-align: center; 
		padding: 10px 0 0 0;
	}
	
	/* Inline Header Navigation */
	#PageDiv .inlineHeader > .navigation, #PageDiv .inlineHeader > .navigation.f-ms {
		font-size: 15px;
		width: 100%;
		display: inline;
		text-align: left;
	}
	#PageDiv .inlineHeader ul { 
		width: 100%;
		margin-top: 10px;
		background-color: #333333;
	}
	#PageDiv .inlineHeader .fwNavItem a { 
		color: #ffffff;
		background: transparent !important;
	}
	#PageDiv .inlineHeader .fwNavItem {
		width: 85% !important;
		padding: 7px 1px 7px 5% !important;
		float: left;
	}

	/* Inline Header Sub Menus */
	#PageDiv .inlineHeader .sub {
		visibility: visible;
		position: relative;
		left: 0;
		}
	#PageDiv .inlineHeader .sub .fwNavItem { 
		border: 0;
		width: 90% !important;
		background-color: #333333 !important;
		clear: both !important;
	}
	#PageDiv .inlineHeader .sub a { 
		color: #c6c6c6 !important;
		font-size: 14px;
		background-color: transparent;
	}

/* Contact form table width tweak */
	#PageDiv .contactTable, #PageDiv .contactTable.f-ms  { 
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	 	width: 100%; 
	}
}

/*----------------------------------------*/
/* 480px breakpoint (smaller mobile) */
@media screen and (max-width:480px) {

/* Your custom CSS here: */
	#body1 {
		padding-top: 225px;
	}
	#fourLeft { min-height:164px !important; }
	#fourLeft_m { min-height:164px !important; }
/* End your custom CSS */

	/* 4 Column TRANSFORM to 1x4 */
	#PageDiv .fourLeft, #PageDiv .fourLeft.f-ms,
	#PageDiv .fourRight, #PageDiv .fourRight.f-ms,
	#PageDiv .fourMiddleRight, #PageDiv .fourMiddleRight.f-ms,
	#PageDiv .fourMiddleLeft, #PageDiv .fourMiddleLeft.f-ms {
		width: 100%;
		clear: both;
		margin-top: 20px;
	}
	
	/* 5 column TRANSFORM to 1x5 */
	#PageDiv .five, #PageDiv .five.f-ms { 
		width: 100%;
		margin-left: 0;
		margin-top: 20px;
	}
	#PageDiv .fiveOne, #PageDiv .fiveOne.f-ms {
		margin-top: 0;
	}
}

/*----------------------------------------*/
/* Utility classes */

@media screen and (min-width:929px){
	.desktopHide { display: none !important; }
}

@media screen and (min-width:571px) and (max-width:928px){
	.tabletHide { display: none !important; }
}

@media screen and (max-width:570px) {
	.mobileHide { display: none !important; }
}