/* ==========================================================================
MAIN.CSS
Author: Venture | Ronald Calbick
Date: 

Contents:
	1. HTML5 Boilerplate - Start (customized)
	2. Global Elements and Classes
	3. Content
	4. Media Queries
	5. HTML5 Boilerplate - End (customized)
========================================================================== */

/* ==========================================================================
   1. HTML5 BOILERPLATE - START (customized)
========================================================================== */
/***** Base styles: opinionated defaults *****/
html, button, input, select, textarea {color: #525252;}
body {
	-webkit-font-smoothing: subpixel-antialiased!important;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em /* 16px */;
}
p {
	line-height: 1.4em;
	margin: 0 0 .75em /* 12px */ 0;
}
a {
	text-decoration: none;
	color: #20a2ff;
}

/***** Placeholder text *****/
::-webkit-input-placeholder {color: #a8a9aa;}
:-moz-placeholder {color: #a8a9aa;} /* Firefox 18- */
::-moz-placeholder {color: #a8a9aa;} /* Firefox 19+ */
:-ms-input-placeholder {color: #a8a9aa;}
.placeholder {color: #a8a9aa;}

/***** Remove text-shadow in selection highlight: h5bp.com/i *****/
::-moz-selection {
	background: #b3d4fc;
	text-shadow: none;
}
::selection {
	background: #b3d4fc;
	text-shadow: none;
}

/***** A better looking default horizontal rule *****/
hr {
    display: block;
    height: 1px;
    margin: 1em 0;
    padding: 0;
    border: none;
    border-top: 1px solid #dddfdf; 
    border-bottom: 1px solid #fff;
}
.lt-ie8 hr {height: 2px;}

/***** Remove the gap between images and the bottom of their containers: h5bp.com/i/440 *****/
img {vertical-align: middle;}

/***** Allow only vertical resizing of textareas. *****/
textarea {resize: vertical;}

/* ==========================================================================
   2. GLOBAL ELEMENTS AND CLASSES
========================================================================== */
/***** Headings and Fonts *****/
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: 400;
}
h1, .h1 {
	font-size: 2.375em /* 38px */;
	margin: 0 0 .316em /* 12px */ 0;
}
h2, .h2 {
	font-size: 1.75em /* 28px */;
	margin: 0 0 .429em /* 12px */ 0;
}
h3, .h3 {
	font-size: 1.375em /* 22px */;
	margin: 0 0 .545em /* 12px */ 0;
}
h4, .h4 {
	font-size: 1em /* 16px */;
	margin: 0 0 .75em /* 12px */ 0;
}
h5, .h5 {
	font-size: .813em /* 13px */;
	margin: 0 0 .923em /* 12px */ 0;
}
h6, .h6 {
	font-size: 0.75em /* 12px */;
	margin: 0 0 1em /* 12px */ 0;
}

.f36 {font-size: 2.25em /* 36px */;}
.f28 {font-size: 1.75em /* 28px */;}
.f24 {font-size: 1.5em /* 24px */;}
.f22 {font-size: 1.375em /* 22px */;}
.f20 {font-size: 1.25em /* 20px */;}
.f18 {font-size: 1.125em /* 18px */;}
.f16 {font-size: 1em /* 16px */;}
.f14 {font-size: .875em /* 14px */;}
.f13 {font-size: .8125em /* 13px */;}
.f12 {font-size: .75em /* 12px */;}
.f10 {font-size: .625em /* 10px */;}

.weight300 {font-weight: 300;} 
.weight700 {font-weight: 700;}
.weight900 {font-weight: 900;}

/***** Buttons *****/
.btn, .btn > input, .btn > a {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin: 0 12px 0 0;	
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	letter-spacing: 0.1em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
/* Buttons */
.btn-default {
	outline: 0;
	margin: 0 6px 0 0;
	padding: 5px;
	border: 1px solid #d3d3d3;
	-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
}
.btn-default:hover {
	background: #e0e0e0;
}
.btn-primary {
	outline: 0;
	border: none;
	-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
	background: #20a2ff;
	color: #fff;
}
.btn-primary:hover {
	border: none;
	background: #20a2ff;
}
.btn1 { /* Light Blue */
	height: 50px;
	line-height: 50px;
	padding: 0 30px;
	-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;	
	background: #20a2ff;
	font-size: 1.25em /* 20px */;
	font-weight: 700;
	color: #fff!important;
}
.btn1:hover {background: #44b0fd;}
.btn1:active {background: #0596fe;}

/* ==========================================================================
   3. MAIN CONTENT
========================================================================== */
.mainContent {
	max-width: 960px;
	margin: 0 auto;
	padding: 50px 25px 0 25px;
}
.mainContent img {max-width: 100%;}

/* ==========================================================================
   4. MEDIA QUERIES
========================================================================== */
/***** JS Media Queries *****/
#js-width {width: 320px;}


/***** 481px + Styles *****/
@media screen and (min-width: 481px) {
	#js-width {width: 481px;}
}

/***** 601px + Styles *****/
@media screen and (min-width: 601px) {
	#js-width {width: 601px;}
}


/***** 769px+ Styles *****/
@media screen and (min-width: 769px) {
	#js-width {width: 769px;}
}

/***** 961px+ Styles *****/
@media screen and (min-width: 961px) {
	#js-width {width: 961px;}
}

/***** 1025px+ Styles *****/
@media screen and (min-width: 1025px) {
	#js-width {width: 1025px;}
}

/***** Retina/High Resolution Displays - Less than 480px *****/
@media (-webkit-min-device-pixel-ratio: 1.5),
	   (-moz-min-device-pixel-ratio: 1.5),
	   (min-device-pixel-ratio: 1.5) {
	/* ... Styles ... */
}

/***** Retina/High Resolution Displays - 480px+ *****/
@media (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5),
	   (min-width: 480px) and (-moz-min-device-pixel-ratio: 1.5),
	   (min-width: 480px) and (min-device-pixel-ratio : 1.5) {
	/* ... Styles ... */
}

/* ==========================================================================
   5. HTML5 BOILERPLATE - END (customized)
========================================================================== */
/***** Global Classes *****/
.clear  {clear: both;}
.floatLeft {float: left;}
.floatRight {float: right;}
.imgLeft {
	float: left;
	margin: 0 12px 12px 0;
}
.imgRight {
	float: right;
	margin: 0 0 12px 12px;
}
.blockImg {display: block;}
 
.left {text-align: left;}
.right {text-align: right;}
.center {text-align: center;}
.justify {text-align: justify;}
 
.bold {font-weight: 700;}
.italic {font-style: italic;}
.underline {border-bottom: 1px solid;}
.indent20 {text-indent: 20px;}
.indent15 {text-indent: 15px;}
.indent10 {text-indent: 10px;}

.x2marg {margin: 0 0 2em 0;}
.paddedLeft {padding: 0 0 0 30px;}
.nomargin {margin: 0;}  
.nopadding {padding: 0;}
.nobullet {
	list-style: none;
	list-style-image: none;
}

.errorPageContent img {max-width: 100%}
.errorPageContent {
	max-width: 960px;
	margin: 0 auto;
	padding: 50px 25px 0 25px;
}

/***** Hide from both screenreaders and browsers: h5bp.com/u *****/
.hidden {
	display: none!important;
	visibility: hidden;
}

/***** Hide only visually, but have it available for screenreaders: h5bp.com/v *****/
.visuallyhidden {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	margin: -1px;    
    padding: 0;
	border: none;
	clip: rect(0 0 0 0);    
}

/***** Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p *****/
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
    position: static;
	overflow: visible;
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;   
}

/***** Hide visually and from screenreaders, but maintain layout *****/
.invisible {visibility: hidden;}

/***** Clearfix: contain floats 
  For modern browsers
	1. The space content is one way to avoid an Opera bug when the `contenteditable` attribute is included anywhere else in 
	   the document. Otherwise it causes space to appear at the top and bottom of elements that receive the `clearfix` class.
	2. The use of `table` rather than `block` is only necessary if using `:before` to contain the top-margins of child elements. *****/
.cf:before, .cf:after {
	content: " "; /* 1 */ 
	display: table; /* 2 */
}
.cf:after {clear: both;}

/***** For IE 6/7 only - Include this rule to trigger hasLayout and contain floats. *****/
.cf {*zoom: 1;}