@charset "utf-8";
/* CSS Document */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{margin:0;padding:0; font-weight:normal;}

*{box-sizing:border-box;-moz-box-sizing:border-box;}
/* structure */   

.special-header{height:97px; margin:0px; padding:0px;}

.fluid-img{ max-width:100%; height:auto;}

.wrapper{padding:1.3%; margin-left:auto;margin-right:auto;left:0;background-color:#fff; max-width:1280px;overflow:hidden;position:relative;}
.inner-wrapper{padding:0px; background-color:#fff; width:100%;overflow:hidden;position:relative;}

.border{ border:1px solid #afbfce;}
.margin-top{ margin-top:25px;}
.margin-auto{ margin:0 auto;}
.padding{ padding:10px;}
.padding1{ padding-right:10px; padding-left:100px; padding-bottom:0px; padding-top:0px;}
.paddingtop{ padding-top:20px;}
.margin-left{ margin-left:100px;}
.clearBoth, .cb, .clear{clear:both;margin:0;padding:0; display: block; overflow: hidden; visibility: hidden;}
.content_hdr p{background-color:transparent;color:#1d4c7b;margin-bottom:2px;font-weight:200; padding-top:10px; padding-left:10px;}

H1.content_hdr,H4.content_hdr, H5.content_hdr, DIV.content_hdr
{color:#1d4c7b;margin-bottom:2px;font-weight:200; padding-top:10px;}

H2.content_hdr{color:#1d4c7b;margin-bottom:2px;font-weight:200; padding-top:10px;}

H3.content_hdr
{color:#1d4c7b;margin-bottom:2px;font-weight:200; padding-top:10px; padding-left:10px;}






#content,aside,.vertical-padding{ padding:0px;}
p{ margin:0 0 1.5em;}
.title{
	font-size: 3vmin;
	position: absolute;
	float: none;
	padding: 0px 0px 0px 0px;
	left: 41px;
	top: 22px;
}


/* RESPONSIVE IMAGES  */
img{ max-width:100%; height:auto;}

.pad{ padding:10px;}


#col .grid_1,
#col .grid_2,
#col .grid_3,
#col .grid_4,
#col .grid_5,
#col .grid_6,
#col .grid_7,
#col .grid_8,
#col .grid_9,
#col .grid_10,
#col .grid_11,
#col .grid_12,{

margin-top:10px;
padding:5px;
background:#fff;}



@media all and (max-width: 480px) and (min-width: 320px) { .padding{ padding:10px;} H2.content_hdr{font-weight:200; padding-top:10px; font-size:22px;}}

@media all and (max-width: 640px) and (min-width: 360px) {}

@media only screen and (min-width: 320px) { }

@media only screen and (min-width: 640px) { }

@media all and (max-width: 1024px) and (min-width: 768px) { }

@media only screen and (min-width: 1024px) {}

@media only screen and (min-width: 920px) {

.wrapp-special-order{max-width: 1200px; margin: .75em auto; margin:30px;}

#content { float:left;width:65%;}
#content.wide-content{float:none;width:100%;}
aside { float:right;width:30%;}


/*GRID*/
/*
 & Columns : 12 

 */
.grid_1 { width: 5%; }
.grid_2 { width: 13.333333333333%; }
.grid_3 { width: 21.666666666667%;}
.grid_4 { width: 30%; }
.grid_5 { width: 38.333333333333%; }
.grid_6 { width: 46.666666666667%; }
.grid_7 { width: 55%; }
.grid_8 { width: 63.333333333333%; }
.grid_9 { width: 71.666666666667%; }
.grid_10 { width: 80%; }
.grid_11 { width: 88.333333333333%; }
.grid_12 { width: 96.667%; }

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	margin-left: 1.6666666666667%;
	margin-right: 1.6666666666667%;
	margin-top:10px;
	float: left;
	margin-bottom:10px;
	
}}


/*
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 1024px) {
#hero .grid_4 { width: 30%; }
#hero h1{ font-size:1.4em;}
#hero .grid_8 { width: 63.333333333333%; margin:0 1.6666666666667%; }

} 

/*
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*/
@media only screen and (min-width: 1240px) {
#hero h1{ font-size:2em;}} 

/*
RETINA (2x RESOLUTION DEVICES)
This applies to the retina iPhone (4s) and iPad (2,3) along with
other displays with a 2x resolution.
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5) {} 

/*
iPHONE 5 MEDIA QUERY
iPhone 5 or iPod Touch 5th generation styles (you can include your own file if you want)
*/
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) { }



