@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/opensans.eot');
    src: url('../fonts/opensans.eot') format('embedded-opentype'),
         url('../fonts/opensans.woff') format('woff'),
         url('../fonts/opensans.ttf') format('truetype'),
         url('../fonts/opensans.svg#opensans') format('svg');
}


body {
    font-family: 'Open Sans', Arial, helvetica, sans-serif;
}

/*-------------------------------------------    
  PRELOAD BAR
-------------------------------------------*/
#loadInfo {display: none; position: absolute; width: 100%; height: 100%; background: #000; text-align: center; z-index: 99999; padding: 100px 0 0 0;}
#statusBar {border: 1px solid #444; width: 300px; background: #000; margin: 0 auto 25px auto}
#status {background: url(../images/preloader-bar.png) 0 50% no-repeat; height: 8px; }

#textStatus { font-weight: 300; color: #6CDFFF;  }
#textStatus .numLoaded {font-family: 'Open Sans', Arial, helvetica, sans-serif; color: #fff; font-size: 1.4em;}
button, input, select, textarea { color:#000;}
/*-------------------------------------------    
  HEADER
-------------------------------------------*/
header .logo {
    display: block; position: absolute; top: 0; z-index: 999; 
    -webkit-transition: padding-top .1s ease-in-out;
    -moz-transition: padding-top .1s ease-in-out;
    -0-transition: padding-top .1s ease-in-out;
    transition: padding-top .1s ease-in-out;
}
/*header .logo:hover, header .on {padding-top:5px;}*/
header .logo img {display: block; margin: 0 auto; max-width: 100%:}
header .logo b {display: none; }
header .logo span {display: block; text-align: center; text-transform: uppercase; font-size: 11px; color: #6CDFFF}


/*-------------------------------------------    
   INSIDE CONTAINER
-------------------------------------------*/
#inside-wrap {width: 100%; background: url(../images/inside-wrap-bg.png) repeat-x}
body.expand #outer {margin: 0 0 30px 0;}
#datalist { min-height:400px;}
#primary {
    position: relative;width: 100%; max-width: 960px; margin: 0 auto;
}
#primary h1 {
    height: 117px; font-family: 'Open Sans', Arial, helvetica, sans-serif; color: #fff; text-shadow: 6px 8px 0 rgba(0,0,0,.3); font-weight: 600;
    color: #fff; font-size: 5em; letter-spacing: normal; padding: 15px 0 0 0; 
    text-shadow: none;text-align: right;
}
#primary h1 span {font-weight: 300; display: block; color: #6CDFFF; font-size: .3em; letter-spacing: normal;}
#primary h1 span strong {font-weight: 300; text-transform: none}

#primary h1 i {font-style: normal; text-transform: none; font-size: .9em; font-weight: 800;}

body#serv.details #primary h1 {line-height: 1em;}
body#serv.details #primary h1 span {margin: 0; line-height: 20px}

#primary h2 {font-weight: 300; font-size: 1.6em}
body.details #primary h2 {font-size: 1.9em}
#primary h2 a {color: #fff;}


/* --- QUOTE --- */
body#quote #quote-form {padding: 25px 0; margin: 0 0 50px 0}


/*-------------------------------------------    
   INSIDE SERVICES
-------------------------------------------*/
body#serv section h2 {margin: 0 0 20px 0; text-shadow: 2px 2px 0 rgba(0,0,0,.5);}
body#serv section h3 {font-size: 1.1em; margin: 0 0 5px; text-shadow: 1px 1px 0 #000; font-weight: 400}
body#serv section figure {display: block; width: 20%; float: left;}
body#serv section article { width: 80%; float: right; display: block; padding: 20px 0 0 0}
body#serv section article img {float: right; margin-left: 15px; max-width: 100%;}



/*-------------------------------------------    
   FEATURED
-------------------------------------------*/
#featured {text-align: center;}
#featured h1, #featured h2 {
    font-family: 'Open Sans'; color: #fff; text-align: center; text-transform: uppercase; font-size: 1em;
}
#featured h1 b,#featured h2 b {font-size: 1.1em; color: #fff; font-weight: 400}
#featured h1 strong,#featured h2 strong {
    font-weight: 800; display: block; margin: 0 0 10px 0;
    text-shadow: 6px 8px 0 rgba(0,0,0,.3);
}

#featured span {font-size: 0.9em; display: block; color: #6CDFFF; font-weight: 400; letter-spacing: 1px;}



.designSlide {display: block}

.panel {width: 100%; height: 100%; position: relative;}
.panel a, .cta {

    font-weight: 600;
    font-size: 1.1em; text-transform: uppercase; color: #fff; 
    background: #14B1DE; display: inline-block; padding: 0 40px; line-height: 2.8em;
    text-shadow: 0 2px 2px rgba(0,0,0,0.6); margin: 0 0 50px 0; font-size: 1.1em; padding: 0 40px; line-height: 2.8em;
        
    /* -- RADIUS -- */
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    -o-border-radius: 18px;
    border-radius: 18px;
    
    /* -- SHADOW -- */
    -webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,0);
    -moz-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,0);
    -o-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,0);
    
background:#ed1c24;
}
.panel a:hover {
    color: #6CDFFF;
    background: #25242A;
    -webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,1);
    -moz-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,1);
    -o-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,1);
    box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,1);
}

.cta {
    font-size: .85em; padding: 0 15px; font-weight: 600;
    -webkit-transition: all .2s ease-in;
}
.cta:hover {
    background: rgba(0,0,0,.5); color: #ed1c24;
    padding: 0 25px;
    -webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
    -moz-box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
    -o-box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
    box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
}

.cta.big {font-size: 1.2em; padding: 0 25px; font-weight: 600}


/* --- /// DETAILS CTA //// ----- */
body.details .cta.big {position: absolute; top: 575px; right: 0; font-size: 1.1em; z-index: 999}




/* Control Nav */
#slidenav {width: 80px; position: absolute; top: 400px; text-align: center; left: 50%; margin-left: -40px; z-index: 99}
#slidenav a:first-child {margin: 0;}
#slidenav a {width: 13px; height: 13px; background: url(../images/bg_control_nav.png) no-repeat 0 0; cursor: pointer; text-indent: -9999px; margin: 0 0 0 5px; display: inline-block; zoom: 1;}
#slidenav a:hover {background-position: 0 -13px;}
#slidenav .activeSlide {background-position: 0 -26px; cursor: default;}

#loading {display: block; width: 30px; height: 30px; position: absolute; top: 60px; left: 50%; margin-left: -10px;}



/*-------------------------------------------    
  PORTFOLIO ICONS
-------------------------------------------*/
body#launch .pinfo .cta {font-size: .9em; padding: 0 20px}
body#launch .col ul {background: url(../images/folio-icons.png) no-repeat 0 0;}



/*-------------------------------------------    
  PORTFOLIO BULLETS 
-------------------------------------------*/
body#launch #case-spots {display: none; width: 350px; position: absolute; top: 80px; left: 50%; margin-left: -175px; z-index: 9999;}
body#launch #case-spots li {display: block; width: 15px; height: 15px; float: left; margin: 0 5px; }
body#launch #case-spots li a {
    cursor: pointer;
    display: block; background: #000; width: 100%; height: 100%; text-indent: -999em; border: 1px solid #555;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -0-border-radius: 50px;
    border-radius: 50px;
}
body#launch #case-spots li a:hover,body#launch #case-spots li.active a {background: #65D1F0}

.ser_widg { /*padding-top:20px;*/ }
/* -- FOLIO PANEL -- */
.folio-panel {width: 100%; position: relative; left: 2000px;}


/* Direction Nav */
#next {width: 52px; height: 101px; margin: 0; display: block; background: url(../images/bg_direction_nav.png) no-repeat -52px 0; position: absolute; top:247px; right: 10px; cursor: pointer; text-indent: -9999px; z-index: 999}
#next:hover {background-position: -52px -101px}

#prev {width: 52px; height: 101px; margin: 0; display: block; background: url(../images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 247px; left: 10px; cursor: pointer; text-indent: -9999px; z-index: 999}
#prev:hover {background-position: 0 -101px}
#services .widg_content { min-height:160px; font-size:14px; line-height:24px;}




/*-------------------------------------------    
   HOME - SERVICES
-------------------------------------------*/
#services p {padding: 0 .5em; margin: 0 0 15px 0; text-align:left; color:#FFFFFF;}
#services h2 {font-size: 15px; color: #fff; margin: 0 0 18px; font-weight: 300; text-align:center;font-family: 'Open Sans', Arial, helvetica, sans-serif;}
#services h2 strong {color: #6AE1FF}
#services h2 a {color: #fff;}

body#home .serv-icon {
    width: 93px; height: 93px; 
}

.serv-icon {
    width: 93px; height: 93px; 
    background:none; /*float: left;*/
}

.serv-icon a {

    display: block; height: 75px; width: 75px; text-indent: -999em;
    margin: 7px auto 0 auto;
    background: url(../images/icons.png) no-repeat; padding: 0; 
    -webkit-transition: background-position .2s ease-in;
    -moz-transition: background-position .2s ease-in;
    -o-transition: background-position .2s ease-in;
    transition: background-position .2s ease-in;
    
}
.serv-icon .icon-web-design {background-position: 0 0;}
.serv-icon .icon-web-design:hover {background-position: 0 -75px;}

.serv-icon .icon-web-dev {background-position: -76px 0;}
.serv-icon .icon-web-dev:hover {background-position: -76px -75px;}

.serv-icon .icon-mobile {background-position: -150px 2px;}
.serv-icon .icon-mobile:hover {background-position: -150px -73px;}

.serv-icon .icon-multi {background-position: -225px 3px;}
.serv-icon .icon-multi:hover {background-position: -225px -72px;}

.serv-icon .icon-cms {background-position: -300px 3px;}
.serv-icon .icon-cms:hover {background-position: -300px -72px;}

.serv-icon .icon-seo {background-position: -375px 3px;}
.serv-icon .icon-seo:hover {background-position: -375px -72px;}

.serv-icon .icon-stats {background-position: -450px 3px;}
.serv-icon .icon-stats:hover {background-position: -450px -72px;}

.serv-icon .icon-ecommerce {background-position: -525px 3px;}
.serv-icon .icon-ecommerce:hover {background-position: -525px -72px;}

.serv-cta {
    font-size: 12px;
    /*background: url(../images/cta-arrow.png) no-repeat 0 50%; */
    padding: 0 0 0 15px;
	float:right;
	margin-right:10px;
}
.serv-cta1 li a {
    font-size: 50px;
    background: url(../images/cta-arrow.png) no-repeat 0 50%; 
    padding: 0 0 0 15px;
}
.productslist li { padding-bottom:10px;text-align:left; height:27px; line-height:14px;}


/*-------------------------------------------    
   CONTENT STYLES
-------------------------------------------*/
.content h2 {font-size: 1.9em}
.content h3 {color: #6CDFFF; font-weight: 300;}

.content p {margin: 0 0 30px 0; line-height: 2em}
body#serv .content p {line-height: 1.7em;}

.content .cta {margin: 0 0 85px 0}

#services section h2 { font-family: "Open Sans";}




/*-------------------------------------------    
   HOME - CONTAINER
-------------------------------------------*/
#midwrap {
    width: 100%; 
    border-bottom: 1px solid #175A7F; 
    margin: 0;
    -webkit-box-shadow: 0 0 25px 5px rgba(0,0,0,0.8);
    -moz-box-shadow: 0 0 25px 5px rgba(0,0,0,0.8);
    -o-box-shadow: 0 0 25px 5px rgba(0,0,0,0.8);
    box-shadow: 0 0 25px 5px rgba(0,0,0,0.8);
}
#container {
    padding: 35px 0 0 0;
    width: 100%; max-width: 960px; margin: 0 auto;
    color: #fff;
    position: relative;
}
#container .cta {margin: 0;}
#container img {max-width: 100%;}


/* --- STYLES --- */
#container h2,#container h3 {
    font-size: 1.8em; margin: 0 0 18px;
    text-shadow: 3px 3px 2px rgba(0,0,0,.3); letter-spacing: -1px;
    font-weight: 600;
	 font-family: 'Open Sans';
}

h2 strong, h3 strong {color: #6CDFFF; font-weight: 600}
#container h2 b, #container h3 b {font-weight: 600}

#container h4 {margin: 0 0 5px 0; font-size: 1.1em; color: #66DFFF; font-weight: 300;}
#container p {
    font-size: 1em; line-height: 1.8em;
    margin: 0 0 25px 0;
    color: rgba(255,255,255,1);
}
#about .trooper {position: absolute; bottom: -6px; right: 0; z-index: 999; max-width: 100%;}


/*-------------------------------------------    
  HOME TABS
-------------------------------------------*/
#tab-container {width: 100%; margin: 0; min-height: 320px; border: 1px; padding: 0;}

aside .tabs {width: 53.125%; position: absolute; top: 0; right: 0;}
aside .tabs li {display: block; float: left; width: 30.1960784%;}
aside .tabs li a {
    font-weight: 400;
    display: block; height: 147px; width: 100%;
    text-align: center; text-transform: uppercase; 
    color: #fff; font-size: 1.1em;
    -webkit-transition: background-position .3s ease-in-out;    
    -moz-transition: background-position .3s ease-in-out;   
    -o-transition: background-position .3s ease-in-out;
    transition: background-position .3s ease-in-out;
}
aside .tabs li a:hover, aside .tabs li.on a {background-position: 50% 0;}
aside .tabs li a img {padding: 12px 0 0 0; margin: 0}
aside .tabs li a span {display: block;}
aside .tabs li a span b {display: block; clear: both;}








/*-------------------------------------------    
  PREFOOTER
-------------------------------------------*/
#prewrap {width: 100%; background: rgba(0,0,0,.3); border-bottom: 1px solid #4D4E52; margin: 0 0 25px}
#prefooter {width: 100%; max-width: 960px; margin: 0 auto; padding: 35px 0}


aside blockquote .author {display: block; padding: 40px 0 0 0; font-size: 12px;background: url(../images/quote-arrow.png) no-repeat 25px 0; position: relative; top: -1px}
aside blockquote p {background: url(../images/quote.png) no-repeat 5% 5% rgba(0,0,0,0.5); border: 1px solid #444; padding: 15px 25px; font-size: 1.1em; color: #fff; line-height: 1.8em; text-indent: 2em;
    
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
    
}


/*-------------------------------------------    
   BLOG POSTS
-------------------------------------------*/
.blog-post img {float: left; border: 1px solid #666; margin: 0 25px 0 0;}
.blog-post h2 {font-size: 1.2em; line-height: 1.5em; margin: 0 0 20px; font-weight: 300}

body#blog .blog-post h2 {font-family: 'Open Sans', Arial, helvetica, sans-serif; font-size: 2.5em; font-weight: 300;}
body#blog .blog-post h2 a {color: #6BDFFF}
body#blog .blog-post h2 a:hover {color: #fff}

body.details .blog-post img { margin: 0 25px 20px 0 }


/* ---- FULL POST STYLES ----- */
body#blog.full-post section {padding: 30px 0 0 0}
body#blog.full-post .blog-post img {margin: 0 0 45px 0; border: 1px solid #666; max-width: 100%; float: none;}


body#blog.full-post .blog-post .result-img {float: left; margin: 0 25px 40px 0;}

body#blog.full-post .blog-post h1 {
    font-family: 'Open Sans', Arial, helvetica, sans-serif; text-align: left; 
    line-height: 1.1em; font-size: 3.5em; font-weight: normal; text-transform: none; color: #fff
}
body#blog.full-post .blog-post h2 {
    font-family: 'Open Sans', Arial, sans-serif; font-size: 2em; 
    background: url(../images/h2-bg.png) repeat-x 0 100%; padding: 0 0 15px 0; 
    text-transform: uppercase; color: #6BDFFF
}
body#blog.full-post .blog-post h3 {
    font-family: 'Open Sans', Arial, sans-serif; font-size: 1.6em; color: #6BDFFF; 
    margin: 0; font-weight: 300;
}
body#blog.full-post .blog-post h4 {
    font-family: 'Open Sans', Arial, sans-serif; color: #fff; margin: 0; 
    text-transform: none; font-size: 1.3em; font-weight: normal;
}
body#blog.full-post .blog-post h5 {
    font-family: 'Open Sans', Arial, sans-serif; color: #6BDFFF; margin: 0; 
    text-transform: normal; font-weight: 300; font-size: 1em;
}

body#blog.full-post .blog-post blockquote {
    float: right; width: 25%; background: #000; padding: 25px; 
    margin: 0 0 25px 25px; font-style: italic; font-size: 1.2em; line-height: 1.8em; color: #fff;
}
body#blog.full-post .blog-post blockquote p {margin: 0}


/* --- POST LIST --- */
body#blog.full-post .blog-post ul {margin: 0 0 35px 50px}
body#blog.full-post .blog-post  ul li {font-size: 1.1em; color: #fff; margin: 0 0 20px 0; background: url(../images/cta-arrow.png) no-repeat 0 5px; padding: 0 0 0 20px; line-height: 1.7em}
body#blog.full-post .blog-post  ul li strong {color: #6BDFFF;}
body#blog.full-post .post {margin: 0 0 55px;}
body#blog.full-post #search {left: auto; right: 0;width: 230px;}
body#blog.full-post aside {padding: 140px 0 0 0}
body#blog.full-post .blog-post {padding: 20px 40px 30px 40px }

/* --- SOCIAL SHARE --- */
#social_btn {margin: 0 0 15px}
body#blog.full-post .blog-post #social_btn .share {margin: 0}
body#blog.full-post .blog-post #social_btn .share li {list-style: none; padding: 0; margin: 0; float: left; width: 100px; background: none;}


/* -- SEARCH RESULTS --- */
body#blog.results .post {margin: 0 0 10px 0}
body#blog.results .blog-post {background: #000;}

/* -- NO RESULTS --- */
body#blog.noresult #search {width: 100%; position: relative; top: -20px; left: 0; right: auto; margin: 0 0 20px;}
body#blog.noresult .blog-post {text-align: center;}
body#blog.noresult .blog-post h1 {text-align: center; font-size: 4em; margin: 0 0 10px}
    
body#blog .feed_sub {line-height: 1em; margin: 0 0 25px 0;  padding: 0 0 25px; border-bottom: 1px solid #333;}
body#blog .feed_sub a {color: #fff; display: block;}    
body#blog .feed_sub span {display: block; font-size: .5em; text-transform: uppercase; color: #6BDFFF}
body#blog .feed_sub img {margin: 0 10px 0 0; float: left;}


/* ---- SUMMARY POST STYLES ----- */
.blog-post p {line-height: 1.8em; margin: 0 0 25px 0}
.blog-post .post {color: #fff;}
.blog-post .post i {padding: 0 1.5%;}
.blog-post .post {text-transform: uppercase; font-size: 11px; display: block; margin: 0 0 10px;}
.blog-post .post .cta {margin: 0 25px 0 0; font-size: 1.2em;}
.blog-post .cta {line-height: 2em; font-size: 10px; margin: 0;}



/*-------------------------------------------    
  FOOTER NAVIGATION
-------------------------------------------*/
#foot-nav dt {margin: 0 0 15px 0; font-size: 15px; font-weight: 400; color:#FFFFFF;border-bottom:1px dotted #ccc;display:inline-block;padding-bottom:5px;}
#foot-nav dd {margin: 0 0 7px 0;}

#foot-nav dd a {
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
#foot-nav dd a:hover {padding: 0 0 0 45px;}

.pro_widg { float:left; width:25%; padding-bottom:20px;  }
.pr_widg { float:left; width:50%; }

/*-------------------------------------------    
   FOOTER
-------------------------------------------*/
#footwrap {width: 100%; max-width: 960px; margin: 0 auto; padding-top:15px;}
footer p {margin: 0 0 15px}

.social li {display: inline-block; float: left; width: 36px; height: 30px;}
.social li a {
    display: block; text-indent: -999em; width: 100%; height: 100%; 
    background: url(../images/social.png) no-repeat; opacity: 0.6;
    
    -webkit-transition: opacity .2s ease-in;
    -moz-transition: opacity .2s ease-in;
    -o-transition: opacity .2s ease-in;
    transition: opacity .2s ease-in;
}
.social li a:hover {opacity: 1.0;}
.social .twitter a {background-position: 0 -60px;}
.social .facebook a {background-position: 0 -90px;}
.social .rss a {background-position: 0 -30px;}


body#contact footer h2 {display: none;}



/*-------------------------------------------    
  TOP NAVIGATION
-------------------------------------------*/
/*
nav {width: 100%; height: 100px; position: absolute; top: 0; left: 0; z-index: 99} 
nav ul {width: 100%; height: 100%; position: relative;}
nav ul li {
    width: 120px; height: 100%; position: absolute; top: 0; cursor: pointer;
    -webkit-transition: background-position .3s ease-in-out;    
    -moz-transition: background-position .3s ease-in-out;   
    -o-transition: background-position .3s ease-in-out;
    transition: background-position .3s ease-in-out;
}
nav ul li a {
    line-height: 1.1em;
    display: block; width: 100%; height: 100%; text-align: center; color: #000; 
    font-size: 14px;
}
nav ul li a:hover { color:#000;}


nav ul li a strong, nav ul li a b {display: block; font-size: 0.7em; letter-spacing: 1px; color: #6BDFFF; font-weight: 300} 
nav ul li a span {display: block; padding: 38px 0 0 0;
    -webkit-transition: background-position .3s ease-in-out .2s;    
    -moz-transition: background-position .3s ease-in-out .2s;   
    -o-transition: background-position .3s ease-in-out .2s;
    transition: background-position .3s ease-in-out .2s;
}

*/
/* Menu */
nav{
}
	.sf-menu {
		list-style:none;
	}
		.sf-menu > li {
			float:left;
			border-left: 1px solid #fff ;
		}

		.sf-menu > li:first-child{
			margin-left:0;
			border-left: none;
		}
			.sf-menu > li > a {
				display: block;
				color:#fff;
				text-decoration:none;
/*				padding: 15px 0px 15px 0px;
*/				/*background: #3996ef;*/
				background:url(../images/menu_bg.png) left top repeat-x;
				transition: 0.2s;
				text-align: center;
				padding: 5px;
			}
			.menu_item{
				padding:10px;
			}
			.menu_item1{
				width: 187px;
				}

			.menu_item2{
				width: 186px;
				}
			.menu_item3{
				width: 190px;
				}

				.sf-menu > li.sfHover > a,
				.sf-menu > li > a:hover,
				.sf-menu > li.current > a {
					color:#fff;
					/*background: #de0000;*/
					background:url(../images/menu_hover_bg.png) left top repeat-x;
					text-decoration:none; 
				}
				.sf-menu > li > a.sf-with-ul:after{
					/*menu arrow*/
				}
			.sf-menu .menu-arrow{display:none;}

		/* submenu */
		.sf-menu ul {
			background:#7b9133;
			display:none;
			left: -1px;
			position: absolute;
			top: 60px;
			width: 211px;
			z-index: 9999;
			padding-top: 12px;
		}
			.sf-menu ul li{
				position:relative;
				font-family:  'opensans';
				font-weight: 300;
				font-size: 20px;
				line-height: 20px;
				letter-spacing: 1px;
			}
				.sf-menu ul li:first-child{
					margin-top:0;
				}
				.sf-menu ul li a{
					
					display: block;
					color:#fff;
					text-decoration:none;
					padding: 4px 0px 6px 31px;
				}
				.sf-menu ul li > a:hover,
				.sf-menu ul li.sfHover > a,
				.sf-menu ul li.active > a{
					color:#7b9133;
					background: #fff;
					text-decoration:none;
				}
		/* subsubmenu */
		.sf-menu ul ul {
			position: absolute;
			background:#7b9133;
			left:0px;
			top:30px;
			padding-bottom: 25px;
			padding-top: 0px;
			z-index: 9999;
		}
			.sf-menu ul ul li a{
				color:#fff;
				text-decoration:none;
				padding-left: 51px;
			}
			.sf-menu ul ul li > a:hover,
			.sf-menu ul ul li.sfHover > a,
			.sf-menu ul ul li.active > a{
				color: #fff;
				background: #677a27;
				text-decoration:none;
			}
	#mm0{
		display:none;
		border: 1px solid #ff781d;
		padding: 3px;
		width: 100%;
	}




/*-------------------------------------------    
  REQUEST QUOTE FORM
-------------------------------------------*/
#quote-form .col {float: left; width: 270px; margin: 0 0 0 16px;}
#quote-form .col.info {width: 200px; margin: 0;}
#quote-form button {font-family: 'Open Sans'; font-weight: 600; width: 210px; margin: 0; float: right;}


/* -- QUOTE PAGE --- */
body#quote #quote-form .col {float: left; width: 28.125%; margin: 0 0 0 16px;}
body#quote #quote-form .col.info {width: 30%; margin: 0;}
body#quote #quote-form .submit {width: 35%; margin: 0; float: right;}

@media screen and (max-width: 768px) {

    body#quote h1 {margin: 0 0 35px 0}
    body#quote footer h2 {display: none;}

    body#quote #quote-form {width: 80%; margin: 0 auto 45px auto;}
    body#quote #quote-form .col {float: none; width: 100%; margin: 0}
    body#quote #quote-form .col.info {float: none; width: 100%; margin: 0;}
    body#quote #quote-form .submit {float: none; width: 100%; margin: 0;}
    body#quote #quote-form textarea, body#quote #quote-form input {width: 95%;}
    body#quote button {margin: 0 auto; float: none;}
}
@media screen and (min-width: 768px) {
	body#home nav { float:right; margin-top:75px;}
	body#subpage nav{ margin-top:75px; float:right;}
}


#quote-form fieldset {margin: 0 0 25px}
#quote-form fieldset label {
    font-size: .9em; display: block;
    margin: 0 0 10px 0; text-transform: uppercase;
}
#quote-form input, #quote-form textarea {
    width: 85%; background: rgba(0,0,0,1); background: #000; border: 1px solid #333; padding: 12px 10px;
    font-size: 1em; color: #fff;
    -moz-border-radius: 10px; -webkit-border-radius: 10px; 
    border-radius: 10px;
}
#quote-form textarea {height: 100px;}

/* -- CUSTOM SELECT --- */
#quote-form fieldset select {width: 50%; position: absolute; top: -550px; right: 0; z-index: 9999; text-transform: none}
.type-select {left: 0;}



/*-------------------------------------------    
  SELECT DROP DOWNS
-------------------------------------------*/
.dropdown {width: 100%;}
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; }
.dropdown a, .dropdown a:visited { color: #fff; text-decoration:none; outline:none; }
.dropdown a:hover { }
.dropdown dt a:hover { border: 1px solid #555;}
.dropdown dt a {
    background: url(../images/drop-arrow.gif) no-repeat 98% 50% #000; 
    display:block; border:1px solid #333; width: 100%; padding: 0; height: 40px;
    -moz-border-radius: 10px; -webkit-border-radius: 10px; 
    border-radius: 10px; line-height: 42px; 
    font-size: 12px; text-indent: 10px; text-transform: none;color: #555;
    font-weight: 300;
}
.dropdown dt a span {cursor:pointer; display:block;}
.dropdown dd ul { 
    background: #000 none repeat scroll 0 0; color: #555; display:none; top: -10px; left: 0; padding:5px 0px; position:absolute; width: 100%; text-transform: none;
    list-style:none; border-left: 1px solid #333; border-right: 1px solid #333; border-bottom: 1px solid #333;
    z-index: 99999;
}
.dropdown span.value { display:none;}
.dropdown dd ul li:first-child {display: none;}
.dropdown dd ul li a { padding:5px 15px; display:block; font-size: 12px;color: #555;}
.dropdown dd ul li a:hover { background: #222; color: #fff}
.dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
.flagvisibility { display:none;}



#quote-form button {
    float: left;
    width: 200px; font-size: 1.1em; 
    text-transform: uppercase; color: #fff; border: none; cursor: pointer; background: #14B1DE; display: inline-block; padding: 0; line-height: 2.2em; text-shadow: 0 2px 2px rgba(0,0,0,0.6); display: block; 
        
    /* -- RADIUS -- */
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    -o-border-radius: 18px;
    border-radius: 18px;
    
    /* -- SHADOW -- */
    -webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,0);
    -moz-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,0);
    -o-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,0);
    
    /* -- GRADIENT -- */
    
    background-image: linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
    background-image: -o-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
    background-image: -moz-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
    background-image: -webkit-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
    background-image: -ms-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
    
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(1, rgb(16,167,213)),
        color-stop(0, rgb(13,121,164))
    );
    
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;

}
#quote-form button:hover {
    color: #6CDFFF;
    background: rgba(0,0,0,.5); color: #6CDFFF;
    -webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
    -moz-box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
    -o-box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
    box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
}


/* these are the various classes used to style the demo error fields */
    .errorField {
      background-color: #990000;
      color: white;
    }
    .errorFieldDemo2 {
      background-color: #ffffcc;
      color: #990000;
    }
    .errorFieldDemo5 {
      background-color: #ffffcc;
      border: 1px solid #aa0000;
      color: #aa0000;
    }
    .errorFieldDemo6 {
      background-color: green;
      color: #yellow;
    }



/*-------------------------------------------    
  JOURNEY
-------------------------------------------*/
body#blog #primary {padding: 25px 0}
body#blog section {width: 72.9166667%; float: left;}
body#blog aside {width: 23.9583333%; float: right;}

body#blog section #featPost {padding: 10px;}
body#blog section #featPost .special {
    color: #fff;
    padding: 25px 25px 35px 25px;
    
    /* -- GRADIENT -- */
    background-image: linear-gradient(bottom, rgb(8,47,82) 2%, rgb(44,120,158) 92%);
    background-image: -o-linear-gradient(bottom, rgb(8,47,82) 2%, rgb(44,120,158) 92%);
    background-image: -moz-linear-gradient(bottom, rgb(8,47,82) 2%, rgb(44,120,158) 92%);
    background-image: -webkit-linear-gradient(bottom, rgb(8,47,82) 2%, rgb(44,120,158) 92%);
    background-image: -ms-linear-gradient(bottom, rgb(8,47,82) 2%, rgb(44,120,158) 92%);
    
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.02, rgb(8,47,82)),
        color-stop(0.92, rgb(44,120,158))
    );
    
}
body#blog section #featPost .special h2 a {color: #fff;text-shadow: 1px 1px 0px #000}
body#blog section #featPost .special img {border: 6px solid #000;}


body#blog section .blog-post {
    padding: 30px;
    background-color: rgba(0,0,0,0.30); margin: 0 0 25px; border: 1px solid #333;
     
}


body#blog aside h3 {margin: 0 0 25px 0; font-size: 1.5em; font-weight: 300;}
body#blog aside ul {margin: 0 0 45px}
body#blog aside ul li {margin: 0 0 10px; background: url(../images/cta-arrow.png) no-repeat 0 3px; padding: 0 0 0 15px}
body#blog aside ul li a {color: #999}
body#blog aside ul li a:hover {color: #fff;}

body#blog aside ol {margin: 0 0 45px}
body#blog aside ol li {margin: 0 0 30px}
body#blog aside ol li time {font-size: 11px; display: block; margin:0 0 5px}
body#blog aside ol li a {font-size: 1.1em; color: #fff;}
body#blog aside ol li a:hover {color: #6CDFFF;}

/*-------------------------------------------    
  SEARCH
-------------------------------------------*/
#search {position: absolute; top: 50px; left: 0; height: 36px; width: 250px; }
#search form {width: 100%; position: relative; margin: 0; padding: 0;}
#search label {position: absolute; top: 0; left: 0; height: 36px; line-height: 36px; z-index: 999; text-indent: 10px}
#search input {
    width: 90%; height: 36px;
    margin: 0; padding: 0 10px;
    background: #000; border: 1px solid #333;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    position: relative; top: 0; left: 0;
    color: #fff;
}
#search button {
    position: absolute; right: -1px; top: 1px; display: block; height: 36px; width: 45px;
    border: none;

    -moz-border-radius-topright: 10px;
    -webkit-border-top-right-radius: 10px;
    -o-border-radius-topright: 10px;
    border-top-right-radius: 10px;
    
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -o-border-radius-bottomright: 10px;
    border-bottom-right-radius: 10px;
    
    /* -- GRADIENT -- */
    background: #139BC3;
    background-image: linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
    background-image: -o-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
    background-image: -moz-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
    background-image: -webkit-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
    background-image: -ms-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
    
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(1, rgb(16,167,213)),
        color-stop(0, rgb(13,121,164))
    );
    
}
#search button span {display: block; width: 33px; height: 32px; background: url(../images/search-icon.png) no-repeat 0 0; text-indent: -999em; margin: 0 auto;}


/*-------------------------------------------    
  MAP
-------------------------------------------*/
body#contact h1 {margin: 0 0 50px 0}

#map {height: 340px; background: rgba(0,0,0,.5); padding: 15px; margin: 0 0 50px}
#map #gmap {
        margin: 0 auto;
        border: 1px dashed #C0C0C0;
        width: 100%;
        height: 340px;
}



#info {width: 36.4583333%; float: left;}
body#contact #primary h2 {font-size: 1.1em; margin: 0 0 30px}
body#contact #primary h2 strong {display: block; font-size: 1.6em}


#info ul li {display: block; height: 42px; margin: 0 0 25px; padding: 0 0 0 60px; color: #fff; background: url(../images/side-social.png) no-repeat 0 0}
#info ul .email-icon {background-position: 0 0}
#info ul .skype-icon {background-position: 0 -42px}
#info ul .twitter-icon {background-position: 0 -84px}
#info ul .face-icon {background-position: 0 -126px}



#form {width: 34%; float: right;}


#form fieldset {margin: 0 0 15px; position: relative;}
#form fieldset label {
    font-size: 1em; display: block;
    margin: 0; position: absolute; top: 10px; left: 10px;
}
#form input, #form textarea {
    width: 95%; background: rgba(0,0,0,0.5); 
    border: none; padding: 12px 10px;
    font-size: 1em; color: #fff;
    -moz-border-radius: 10px; -webkit-border-radius: 10px; 
    border-radius: 10px;
    
    -webkit-box-shadow: 1px 1px 0 rgba(255,255,255,0.2);
    -moz-box-shadow: 1px 1px 0 rgba(255,255,255,0.2);
    -o-box-shadow: 1px 1px 0 rgba(255,255,255,0.2);
    box-shadow: 1px 1px 0 rgba(255,255,255,0.2);
    
}
#form textarea {height: 100px;}


#form button {
    font-family: 'Open Sans'; font-weight: 600;
    float: right; font-size: 1em; 
    text-transform: uppercase; color: #fff; border: none; cursor: pointer; background: #14B1DE; display: inline-block; padding: 0 25px; line-height: 2.2em; text-shadow: 0 2px 2px rgba(0,0,0,0.6); display: block; 
        
    /* -- RADIUS -- */
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    -o-border-radius: 18px;
    border-radius: 18px;
    
    /* -- SHADOW -- */
    -webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,0);
    -moz-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,0);
    -o-box-shadow: inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,0);
    
    /* -- GRADIENT -- */
    
    background-image: linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
    background-image: -o-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
    background-image: -moz-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
    background-image: -webkit-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
    background-image: -ms-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
    
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(1, rgb(16,167,213)),
        color-stop(0, rgb(13,121,164))
    );
    
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;

}
#form button:hover {
    color: #6CDFFF;
    background: rgba(0,0,0,.5); color: #6CDFFF;
    -webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
    -moz-box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
    -o-box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
    box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
}


/* ---- VALIDATE FORM ------ */
body#quote .pop {
    background: none;
    font-size: 2em;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.pop {
    text-align: left;
    padding: 10px;
    font-size: 1em;
    color: #6CDFFF;
    position: absolute;
    display: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: -1px 1px 2px #000;
    -moz-box-shadow: -1px 1px 2px #000;
    box-shadow: -1px 1px 2px #000;
}

.error {
    border: 0;
	color:#c3040c;

}

.correct {
    background: #1A1B1E;
    border: 0; color: #fff; font-size: 1em; padding: 0 0 20px 0
}

.wrong {
    font-weight: bold;
    color: #e90000;
}

.normal {
    font-weight: normal;
    color: #222;
}

.serv-cta1 { background:url(../images/bg_control_nav.png) left -26px no-repeat; height:13px; padding-left:20px; display:block;}  

/*-------------------------------------------    
  IGD ICON
-------------------------------------------*/
.igd-icon {
    position: absolute; right: 0;   
    display: block; width: 136px; height: 36px; background: url(../images/igd-icon.png) no-repeat 0 0;
    opacity: 0.5; text-indent: -999em;
    -webkit-transition: opacity .2s ease-in;
    -moz-transition: opacity .2s ease-in;
    -o-transition: opacity .2s ease-in;
    transition: opacity .2s ease-in;
}
.igd-icon:hover {opacity: 1.0;}



/*-------------------------------------------    
  NOMINATION
-------------------------------------------*/
#awwwards {
    display: block; width: 69px; height: 105px;
    text-indent: -9999em; background: url(../images/awwards.png) no-repeat 0 0; 
    position: fixed; top: 750px; left: 0; z-index: 99999;
}
#cssda {
    display: block; width: 69px; height: 164px;
    text-indent: -9999em; background: url(../images/cssda.png) no-repeat 0 0; 
    position: fixed; top: 700px; right: 0; z-index: 99999;
}
#cssawards {
    display: block; width: 115px; height: 115px;
    text-indent: -9999em; background: url(../images/cssawards.png) no-repeat 0 0; 
    position: fixed; top: 0; left: 0; z-index: 99999;
}
#csswinner {
    display: block; width: 81px; height: 59px;
    text-indent: -9999em; background: url(../images/css-winner.png) no-repeat 0 0; 
    position: fixed; top: 30px; right: 0; z-index: 99999;
}

.addr { float:left; padding-right:15px; /*background:url(../images/servicebg.png) right bottom no-repeat;*/ 
display:block; height:212px; padding-top:20px; margin-left:20px; line-height:23px; font-size:14px;}
#phone { display:inline-block; width:45px; }
#fax {  display:inline-block; width:40px;  }
#email {  display:inline-block; width:45px; }
#location { background:url(../images/location.png) left top no-repeat; height:23px; width:20px; display:inline-block; line-height:23px; margin-top:10px;  }
.footer_cnt_wrap { border-top:1px dotted #fff;}
.cnt_title_img { display:block; width:100%;}

.prod_btn, .pagena_btn {
    font-size: 12px; 
	color: #fff; 
	border: none; 
	cursor: pointer; 
	display: inline-block;  
	text-shadow: 0 2px 2px rgba(0,0,0,0.6); 
	display: block; 
	padding:3px;
}
.prod_btn { float:right;}
.prod_btn:hover, .pagena_btn:hover {
    color: #14B1DE; 
    /*
    background: rgba(0,0,0,.5); color: #6CDFFF;
    -webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
    -moz-box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
    -o-box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
    box-shadow: inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
    */
}
.table_title_right { text-align:right; font-size:12px;}
.pagena_btn { float:left; margin-right:10px;}
.select_state li { float:left; margin-right:10px; margin-bottom:15px;}
.districtlist { width:20%; float:left; margin-right:2%; min-height:150px; text-align:left; padding:10px; margin-bottom:10px;border-bottom:1px solid #ccc;}
.select_state select { border:none; padding-left:5px;}
.select_state option { padding-left:5px;}
.singleproimg img { display:block; float:left; margin-right:3px; margin-bottom:5px; background: #fff; padding: 10px;}
.awards li { float:left; display:block; text-align:center;}
.awards li img {border:2px solid #b8e2ff; padding:3px;}
.tipsicon li { font-size:14px;}
table.solar_table {width:40%; float:left;}
.floated_singleproimg { margin-left:15px; float:left;}
.singleproimg { margin-top:15px;}