/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,button,input,select,textarea {    color: #222;}
body {    font-size: 1em;    line-height: 1.4;}
::-moz-selection {background: #b3d4fc;text-shadow: none;}
::selection {    background: #b3d4fc;text-shadow: none;}
hr {    display: block;height: 1px;    border: 0;    border-top: 1px solid #ccc;    margin: 1em 0;    padding: 0;}
img {    vertical-align: middle;}
fieldset {    border: 0;margin: 0;    padding: 0;}
textarea {    resize: vertical;}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */
.chromeframe {    margin: 0.2em 0;    background: #ccc;color: #000;    padding: 0.2em 0;}
/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body { text-align:center; padding:0 0; margin:0; background:#fff;color:#00333E;  font:14px/150% Arial, Helvetica, sans-serif; font-weight:normal  }

#wrapper { text-align:left; position:relative; padding:0 0; width:100%; }

.inner { width:1000px;margin:0 auto 0 auto; position:relative}

#header, #footer {  width:100%;  padding:0 0 0 0; background:#fff; position:relative; height:65px;}

#mid { width:100%;  padding:0 0 0 0; background:#EFF0F2;}
#side { width:250px;  padding:0 0 0 0; background:#CCC666; float:left }
#main { width:740px;  padding:0 0 0 0; background:#663366; float:left }

.col-1 { width:100%; background:orange; float:left;  }
.col-2 {width:360px; margin-right:20px; background:#fff; float:left;   }
.col-3 {width:233px; margin-right:20px; background:orange; float:left;    }

/* LOGO  */
#logo { display:block; width:125px; height:40px; background:url(../img/logo.png) no-repeat 0 0; position:absolute; top:12px; left:0; }
#logo span { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

.items {position:absolute; top:23px; left:133px; color:#666; font-size:16px;  }

/* NAV  */
nav#primary { float:right; margin:12px 0 0 0; padding:0; }
nav#primary ul { list-style:none; display:inline;  margin:0 0 0 0; padding:0; }
nav#primary li {  margin:0 0 0 0 ;float:left; height:40px; line-height:40px; font-family:'VAG Rounded W01 Black'; font-size:20px; text-transform:uppercase; }
nav#primary a { display:block;  margin:0; padding:0 12px; color:#00333E;  }
nav#primary a:hover { color: #F15924; }

nav#primary li#nav-login a { background:#4A7BB8; color:#fff;-webkit-border-radius: 3px; border-radius: 3px; } 

/* NAV SECONDARY  */
nav#secondary { position:absolute; top:0; right:0;}
nav#secondary ul {  display:inline; margin:0 0 0 0; }
nav#secondary li {  margin:0 0 0 0 ; float:left; }
nav#secondary a { display:block; margin:0; padding:0 15px; color:#666; background:#f6f6f6  }
nav#secondary a:hover { color: #fff;  }


/* ----- search box ----- */
.searchbox { width:auto; padding:20px 0; position:relative; }
.searchbox p { font-size:26px; font-family:'VAG Rounded W01 Black';  text-transform:uppercase; padding:7px 0; }
.searchbox p span {color: #F15924; } 
.badge { position:absolute; top:0; right:-35px; z-index:99999 }
.badge a { display:block; width:164px; height:164px; background: url(../img/badge.png) no-repeat 0 0; }

/* ----- counter  ----- */
.counter { width:100%; float:left; }
.stat { float:left;  width:199px; border-right:#bbb 1px solid;border-bottom:#bbb 1px solid; }
.stat p.statdesc { padding:10px 10px 2px; font-size:43px;font-family: 'Pathway Gothic One', sans-serif; text-transform:uppercase; line-height:86%; letter-spacing:-1px;  }
.stat p.statvalue { padding:0 10px 10px; font-size:85px; font-family: 'Pathway Gothic One', sans-serif; text-transform:uppercase; line-height:90%; letter-spacing:-3px;color: #F15924; }

.col1 { width:222px; }
.col2 { width:176px; }
.col3 { width:191px; }
.col4 { width:173px; }
.col5 { width:234px; border-right:0 !important; position:relative; }

.socialstats { top:10px; right:0; position:absolute; margin:0 !important; padding:0 !important; display:block; list-style:none }
.socialstats li { float:left; margin:0; padding:0 ; margin-left:4px; }
.socialstats li a { width:30px; height:30px; display:block; }
.socialstats .twitter a { background:url(../img/icon-tw-30.png) no-repeat 0 0; }
.socialstats .facebook a { background: url(../img/icon-fb-30.png) no-repeat 0 0;  }

.heading { float:left; border-bottom:#bbb 1px solid; width:100%; padding:15px 0; font-family:'VAG Rounded W01 Black'; font-size:20px; text-transform:uppercase; color:#999; }


/* ----- main slider  ----- */


/* ----- customers  ----- */

.customers .slides { padding:10px 10px 10px 0;padding:0 0 0 0; }

/* ----- quotes  ----- */

#quotes .slides-inner { padding:20px 0 20px 20px;}

#quotes p.quotetxt { font-size:30px;font-family: 'Pathway Gothic One', sans-serif; text-transform:uppercase; line-height:92%; letter-spacing:-1px; margin-bottom:10px; float:left; }
#quotes p.name { font-size:19px;font-family: 'Pathway Gothic One', sans-serif; text-transform:uppercase;  background:#F15924; color:#fff; padding:3px 7px; letter-spacing:normal; border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px; display:inline-block; zoom: 1;
*display: inline; }
#quotes .quotepic { float:right; margin-top:-60px }
#quotes .quotepic img { width:20px !important; }

/* ----- ARTICLES ----- */
article {  }
article header { background:pink }
article header p { font-size:12px; }

/* comments  */
.comment article { position:relative;display:block; }
.comment article img { position:absolute; top:0; left:0; }
.comment article header{ display:block; margin-left:60px; width:auto; }
#main .comment article header h3 { font-size:16px; margin-bottom:5px }/* comment post by  */


/* ----- FORMS ----- */

.form { width:100%; float:left; padding:15px 0;}
.form .row { margin:0 0 15px 0; }
.form label {  margin:0 0 2px 0; display:block; width:100%; font-size:14px; color:#555;}

.form input, .form textarea  {width:600px;  padding:10px 5px; background:#fafafa; border:#ccc 1px solid; color:#222; box-sizing:border-box; font-size:24px; color:#777; float:left; border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px; }



/* ----- labels inside inputs ----- */
.inside { display: block;}
.inside span { position: absolute; padding: 9px 5px ; margin-left: 3px;color: #999; z-index: 1;cursor: text;}
.inside input, .inside textarea, .inside select { z-index: 0; padding: 6px; margin: 0; font: inherit;}
/* Hack to remove Safari's extra padding. Remove if you don't care about pixel-perfection. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	  .inside input, .inside textarea, .inside select { padding:8px 5px}
}



/* ----- BUTTONS ----- */
p.formgroup {  margin:0 0 0 0!important; padding:0 0 0 0;  }
p.formgroup a {  margin:0 5px 0 0; }

.btn  { width:223px; padding:0 75px;   display: inline-block; padding:0 0; height:50px; line-height:50px;  background:#5EAAF5; color:#fff!important; text-align:center; float:left; font-size:22px; font-family:'VAG Rounded W01 Black';  text-transform:uppercase; margin-left:10px;  border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px; }
.btn span  { padding:0 75px;  }
	.btn:hover { background:#3885C4; color:#fff;}

/* ----- footer ----- */


footer ul {list-style:none; padding:15px 0; line-height:30px; margin:0; color:#666;}
footer li {float:left;padding:0 15px 0 0;}
footer li a {}
footer li a:hover { }
footer li.social { float:right; border:none; padding:0 0 0 0; margin-left:5px; }
footer li.social a { width:30px; height:30px; display:block; }
.social.twitter a { background:url(../img/icon-tw-30.png) no-repeat 0 0; }
.social.google a { background:url(../img/icon-google-30.png) no-repeat 0 0 }
.social.facebook a { background:url(../img/icon-fblike-30.png) no-repeat 0 0; width:75px; }






/* ----- global paragraphs, headers & horizontal rules ----- */
p, h1, h2, h3, h4, h5, h6 {margin:0 0 0 0; padding:0; }
#main p, #main h1, #main h2, #main h3, #main h4, #main h5, #main h6 {margin:0 0 15px 0; padding:0;}
#main p { line-height:140%; }
h1{font-size:30px;}
h2{font-size:22px;}
h3{font-size:18px;}
h4, h5{font-size:100%;}
hr{display:none;}

/* ----- global links ----- */
a:link, a:visited, a:active{
	color:#275f81;
	text-decoration:none;
}
a:hover{color:#111;}





/* ==|== non-semantic helper classes ======================================== */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.last { margin-right:0!important }

/*
 * 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.
 */

.clearfix:before, .clearfix:after {    content: " "; /* 1 */display: table; /* 2 */}
.clearfix:after {    clear: both;}

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

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}


@media screen and (max-width: 650px) {
	#wrapper { width:90%}
#header, #footer {	height: auto;width: 100%;float: none;}
nav#primary, nav#secondary, #logo, nav#primary li, nav#secondary li  {width: 100% !important;float: none !important;margin: 0;position: static; }
#mid {width: auto;float: none;margin: 0 0;}	
#main, #side, .col-2 {width: 100% !important;float: none;margin: 0;}	

img {max-width: 100%;height: auto;width: auto\9; /* ie8 */}	
.video embed, .video object, .video iframe {	width: 100%;height: auto;}


.form input, .form textarea  {width:100%; box-sizing:border-box }
.form select  {width:100%; box-sizing:border-box  }	
.btn { width:100%; }	
	
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow:none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}