/*
	99Lime.com HTML KickStart by Joshua Gatcke
	style.css
	
*/

/*---------------------------------
	IMPORTS
-----------------------------------*/
/*@import url(http://fonts.googleapis.com/css?family=Arimo:400,700);*/
	@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
/*---------------------------------
	OVERRIDES
-----------------------------------*/
#content * { -webkit-animation: fadein 2s; -moz-animation: fadein 2s; -ms-animation: fadein 2s; -o-animation: fadein 2s; animation: fadein 2s;  }


html:blur {-webkit-animation: fadein 2s; -moz-animation: fadein 2s; -ms-animation: fadein 2s; -o-animation: fadein 2s; animation: fadein 2s;}
@keyframes fadein { from { opacity: .0; } to { opacity: 1; } } @-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadein { from { opacity: .0; } to { opacity: 1; } } @-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } @-moz-keyframes fadein { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes fadein { from { opacity: 1; } to { opacity: 0; } } @-ms-keyframes fadein { from { opacity: 1; } to { opacity: 0; } } @-o-keyframes fadein { from { opacity: 1; } to { opacity: 0; } }
/*---------------------------------
	LAYOUT
-----------------------------------*/
html, body { width: 100%; height: 100%; xbackground: #323C45; position: relative; xdisplay: table; border-top: #900 6px solid; }
body { margin: 0; padding: 0 0 0 0; font: normal 16px/140% 'Myriad Pro', 'Open Sans', arial, verdana, sans-serif; color: #4c5c69; text-shadow: 0px 0px 1px transparent; /* google font pixelation fix */ }
#progress-cont {
  height: 12px;
  position: fixed;
  width: 100%;
  top: 0px;
  left: 0px;z-index:99999;    background: #990000;
}

#progress-bar {
  height: 100%;
  background-color: #000;
}
header { background: #fff; position: relative; min-height: 160px; float: left; width: 100%; }
header *[class*="col_"] { margin-top: 0; margin-bottom: 0; }
footer { position: relative; clear: both; width: 100%; left: 0; bottom: 0; padding-top: 1.2em; min-height: 12em; background: #323C45 url(../images/bg_main.png) repeat fixed; color: #999; border-top: #900 12px solid; }
#footerBottom { background: #000; margin-top: 3em; padding: 1em; }
#logo { margin: 2em 1em; width: 300px; }
#contactBar { margin-top: 12px; }
#contactBar * { vertical-align: middle }
.topPhone { padding-right: 1.5em; }
.topPhone i { color: #900; }
#footerlogo { width: 160px; }
#middle { margin: 0; background: #F6F6F6; float: left; width: 100%; }
#wrapper { overflow: hidden; }
#mainContent { margin: 0 auto; width: 100%; padding: 0 0 2em; }
#content { padding: 0em 1em 3em; min-height: 26em; }
#sidenav { position: relative; }
#sidenav ul li a { padding: 1em .5em; background: #888; margin: 0 0 1px 0; color: #fff; }
/*---------------------------------
	HEADINGS
-----------------------------------*/
h1, h2, h3, h4, h5, h6 { font-family: "Open Sans", arial, verdana, sans-serif; font-weight: 300; line-height: 120%; }
h1 { font-size: 2.6em; margin: 30px 0 10px 0; font-weight: 700; text-transform: uppercase; }
h2 { font-size: 2.05em; margin: 20px 0 10px 0; font-weight: 300; }
h3 { font-size: 1.6em; margin: 20px 0 10px 0; }
h4 { font-size: 1.35em; margin: 10px 0 10px 0; font-weight: 700;  }
h5 { font-size: 1.2em; margin: 10px 0 10px 0;font-weight: 700; }
h6 { font-size: 1.1em; margin: 10px 0 5px 0;font-weight: 700; }
ul.menus { list-style: none; margin: 0; padding: 0; }
ul.menus li { list-style: none; margin: 0 0 0 6px; padding: 0; display: inline-block; }
ul.menus a { color: #000; text-decoration: none; }
[data-whatinput='touch'] .touch { background-color: #900; color: #8a6d3b; }
/*  Main Nav */
#headNav { position: relative; right: 0; display: inline-block; float: right; bottom: -68px;    z-index: 9; /*margin: 62px 0 0 0; */}
#headNav ul.menus li { border-bottom: 6px transparent solid; }
#headNav ul.menus li:hover { border-bottom: 6px #999 solid; }
#headNav ul.menus li.current { border-bottom: 6px #900 solid; }
#headNav ul.menus li.current i { color: #900; }
#headNav ul.menus a { float: left; display: inline-block; font-size: 1.2em; margin: 0 .55em; text-transform: uppercase; line-height: 100%; font-weight: bold; }
#headNav ul.menus a span { display: block; font-size: .7em; color: #777; font-weight: normal; white-space: nowrap; }
/*  Footer Nav */
footer ul.menus li { list-style: none; margin: 0; padding: 0; display: block; }
footer ul.menus li.listTitle { font-size: 1.6em; color: #7B8195; text-transform: uppercase; margin-bottom: .5em; }
footer a { color: #999; }
footer ul.menus a { color: #999; font-size: 1.0em; margin: 0; display: inline-block; line-height: 100%; width: 100%; }
footer ul.menus a:hover, footer a:hover { color: #fff; }
a.actioncall { background: #900; display: inline-block; text-transform: uppercase; font-weight: bold; color: #fff; text-decoration: none; padding: .5em 2em; margin: 2em auto; font-size: 1.6em; max-width: 90%; box-shadow: 0 6px 12px rgba(0,0,0,.5) }
a.actioncall:active { box-shadow: none }
/* About Us */
.wehave { -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; }
.wehave { font-size: 1.8em; color: #ccc; margin: 24px 0 12px 64px; text-transform: uppercase; cursor: pointer; line-height: 120%; }
.wehave.active, .wehave.active:hover { font-size: 2.0em; color: #000; }
.wehave.active2 { font-size: 1.9em; color: #888; }
.wehave.active3 { font-size: 1.8em; color: #aaa; }
.wehave:hover { color: #900; }
.wehaveanswer { margin: 0 12px 0 80px; font-size: 1.3em; display: none; }
.we { color: #900!Important; display: none; position: absolute; margin: 0 0 0 -52px; }
.we2 { color: #900!Important; display: none; position: absolute; margin: 0 0 0 -76px; }
/* PORTFOLIO */

#portfolioBlockHome { text-align: center; }
.portfolioBlockHome { padding: .5em; background: #fff; color: #333; width: 18%; margin: .5em; display: inline-block; vertical-align: top; position: relative; min-height: 310px; }
.title { background: #333; padding: 6px; margin: -8px calc(-8px) 2px; color: #fff; display: flex; height: 60px; justify-content: center; flex-direction: column; text-align: center; width: -moz-calc(100% + 16px); width: calc(100% + 16px); }
.desc { font-size: .8em; line-height: 110%; display: block; margin: .5em 0; }
.crop { height: 150px; width: 100%; overflow: hidden; }
.crop img { width: 100%; height: auto; position: relative; top: 50%; -webkit-transform: translateY(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ -ms-transform: translateY(-50%); /* IE 9 */ transform: translateY(-50%); /* IE 10, Fx 16+, Op 12.1+ */ }
.link { display: block; position: absolute; bottom: 7px; width: 100%; }
.portgrid { position: relative; }
.grid-item { width: 31.666666666667%; margin: .5em; }
.grid-item--width2 { width: 400px; }
div.portfolio { background: #F0F0F0; border: 1px solid #ccc; padding: 10px; overflow: visible; }
.pImg { margin: 1em 0; }
.portLinks { text-align: left; }
.cost { display: inline-block; margin: 0 12px 0 0; }
.portSite { float: right; margin: 0 18px 0 0; }
#filterNav a { display: inline-block; width: auto; margin: 0 0 10px 8px; color: #555; background: #ddd; text-decoration: none; padding: 6px; border-radius: 4px; }
#filterNav a:hover, #filterNav a.filterActive { background: #333; color: #fff; -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, .6); -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, .6); box-shadow: 0px 0px 20px rgba(0, 0, 0, .6); }
/* MISC OBJ */

.homeMast { max-width: 100%; height: auto; }
.breakout { margin: 2em calc(50% - 50vw); overflow: auto; }
.breakoutNoMarg { margin: 0em calc(50% - 50vw); overflow: auto; }
.breakoutNoMarg > .grid { padding: 0 1.5em }
.tight *[class*="col_"] { margin-left: 0.83333333333333%; margin-right: 0.83333333333333%; margin-top: 0.0em!important; margin-bottom: 0.0em!important; }
.bg1 { background: #fff; padding: 2em 0; border-top: 1px dotted #ccc; border-bottom: 1px dotted #ccc; }
.bg2 { background: #323C45; padding: 2em 0; color: #fff; }
.box { padding: 16px; border-radius: 12px; border: 4px solid #999; box-shadow: 0 0 8px #999; }
.halo { box-shadow: 0 0 8px rgba(0,0,0,.9) }
.scrollTo { cursor: pointer; opacity: .5; }
.scrollTo:hover { opacity: 1; }
.clickme { position: fixed; z-index: 20; bottom: 260px; right: 10px; display: none; opacity: .5; }
.clickme:hover { opacity: 1 }
#arrowup { width: 32px; }
.scrollTo, .clickme { transition: all 0.5s ease; }
.blackBar { padding: .5em; color: #fff; background: #323C45; }
.redBar { padding: .5em; color: #fff; background: #900; }
.redText { color: #900; }
.bgRed { background:/* #900*/ #073d7f; color: #fff; }
.bgBlack { background: #000; color: #fff; }
.bgDkGrey { background: #323C45; color: #fff; }
.bgRed > .grid > h2, .bgBlack > .grid > h2, .bgRed > .grid > h3, .bgBlack > .grid > h3 { padding: 1em 0 }
.bigText { font-size: 1.5em; line-height: 130%; }
.bigBox { padding: 2em; }
.bigBoxGrey { padding: 2em; background: #777; color: #fff; }
.largeText { font-size: 2.2em; line-height: 130%; }
.lightText { font-weight: 300; font-family: "Open Sans", arial, verdana, sans-serif; }
.padH { padding: 0 5%; }
.padH > p,.padH > ul,.padH  ol { padding: 0 10%; }
ol.alt li {padding: 0 0;}
ul ul {margin-bottom: 1em;}
.padV {padding: 1em 0}
.padItem * { padding: .25em; }
.narrowPage { max-width: 800px; margin: 0 auto; }
/* other  */
.roundnum { float: left; display: inline-block; background: #15007f; color: #fff; -webkit-border-radius: 15px; border-radius: 15px; /*    font: 500 16px/16px 'Raleway';*/ width: 30px; height: 30px; text-align: center; margin-left: -38px; }
a.button.black, button.black, input[type=submit].black { color: #fff; text-decoration: none; margin-right: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 0px rgba(255,255,255,0.1) inset, 0 0px 1px rgba(0,0,0,0.7); -moz-box-shadow: 0 1px 0px rgba(255,255,255,0.1) inset, 0 0px 1px rgba(0,0,0,0.7); box-shadow: 0 1px 0px rgba(255,255,255,0.1) inset, 0 0px 1px rgba(0,0,0,0.7); background: rgba(0,0,0,1); /* #191919 */ border: 1px solid #141414; padding: 10px 25px; }
a.button.red, input[type=submit].red, a.button.red:hover, input[type=submit].red:hover { color: #fff; text-decoration: none; margin-right: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 0px rgba(255,255,255,0.1) inset, 0 0px 1px rgba(0,0,0,0.7); -moz-box-shadow: 0 1px 0px rgba(255,255,255,0.1) inset, 0 0px 1px rgba(0,0,0,0.7); box-shadow: 0 1px 0px rgba(255,255,255,0.1) inset, 0 0px 1px rgba(0,0,0,0.7); background: #900; /* #191919 */ border: 1px solid #900; padding: 10px 25px; }
a.button.black:active, a.button.black:focus { box-shadow: 0 0 0 transparent inset; }
div.multiColumn { padding: 1em 0 0 0; -moz-column-count: 2; -moz-column-gap: 20px; -webkit-column-count: 2; -webkit-column-gap: 20px; column-count: 2; column-gap: 20px; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; overflow: hidden;  }
div.multiColumn3 { padding: 1em 0 0 0; -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; column-count: 3; column-gap: 20px; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; }
.multiColumn li, .multiColumn3 li { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; }
.multiColumn3 ul { }
.multiColumn3 a { text-decoration: none; color: #036; font-size: 1.2em; }
#socMedia * { vertical-align: middle; margin-right: 6px; }
.bigText { font-size: 140%; line-height: 120%; }
.bigText2 { font-size: 200%; line-height: 120%; }
.redText { color: #900; }
.greenText { color: #063 }
/* NAV BAR*/
.navbar { position: fixed; top: 0; left: 0; width: 100%; background: #000; color: #fff; z-index: 1000; }
.navbar #logo { position: absolute; top: 0; right: 0; padding: 0.5em 1em; font-size: 1.7em; color: #efefef; text-decoration: none; }
.navbar span { color: #86dc00; }
.navbar ul { display: inline-block; margin: 0; padding: 0; }
.navbar li { margin: 0; padding: 0; list-style-type: 0; display: inline-block; }
.navbar li a { display: inline-block; color: #efefef; padding: 1em 1.3em; text-decoration: none; text-transform: uppercase; line-height: 100%; font-size: 1.2em; }
.callout { background: #323C45;/*#86dc00;*/ padding: 1.2em 0; color: #fff; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.2); text-align: center; text-shadow: 0px 1px 3px rgba(0,0,0,0.2); display: block; }
.callout + div.grid { margin-top: 50px; }
a.callout { cursor: pointer; }
.callout i.icon-4x { font-size: 6em; }
.callout h4 { margin-bottom: 30px; }
.callout-top { margin: 50px 0 0 0; }
.callout p { margin-bottom: 0; }
.callout .button { margin-top: 10px; }
.callout.green { background: #19ad0b;/*#86dc00;*/ }
ol:not(.alt){ counter-reset: li; margin-left: 60px; padding-left: 0; margin-top: 2em; max-width: 1000px; line-height: 120%; }
ol:not(.alt) > li { position: relative;min-height: 3em;  /* Create a positioning context */ margin: 0 0 12px 2em; /* Give each list item a left margin to make room for the numbers */ padding: 4px 8px; /* Add some spacing around the content */ list-style: none; /* Disable the normal item numbering */ border-top: 1px solid #4C5C69; background: #f6f6f6; }
ol:not(.alt) > li:before { content: counter(li); /* Use the counter as content */ counter-increment: li; /* Increment the counter by 1 */ /* Position and style the number */ position: absolute; top: -2px; left: -2em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 2em; min-height: 100%; /* Some space between the number and the content in browsers that support   generated content but not positioning it (Camino 2 is one example) */ margin-right: 8px; padding: 14px 8px 8px 8px; border-top: 1px solid #4C5C69; color: #fff; background: #4C5C69; font-weight: bold; font-size: 1.6em; text-align: center; }
li ol, li ul { margin-top: 16px; }
ol ol li:last-child { margin-bottom: 0; }
.four_cols { column-count: 4; -webkit-column-count: 4; -moz-column-count: 4; overflow: visible!Important; -webkit-column-break-inside: avoid; break-inside: avoid-column; }
.noBreak { -webkit-column-break-inside: avoid; break-inside: avoid-column; margin-bottom: 1em; }
#inquiryform div { position: relative }
#inquiryform label { position: absolute; margin-top: -.6em; margin-left: 1em; color: #000; font-size: .9em; opacity: .5; }
#inquiryform label.error {color: tomato; font-size:18px; opacity: 1;}
 @media all and (min-width: 1024px) and (max-width: 1280px) {
header { padding: 0 0%; }
.menu li a { padding: 28px 6px; }
}
 @media all and (max-width: 1146px) {
		header { min-height: auto; height: auto; }
#headNav { display: block; float: none; width: 100%; clear: both; margin: 0; padding-left: 3em; bottom:0px; }
header .grid *[class*="col_"] { width: 47%; float: left; clear: none; display: inline; margin-top: 0; margin-bottom: 0; }
	}
 @media all and (max-width: 1090px) {
.grid-item { width: 48.333333333333%; margin: .5em; }


}
 @media all and (max-width: 850px) {#headNav ul.menus li.current {
    border-bottom: none;
}
#headNav ul.menus li a span { display: none; height: 0 }
.topPhone { display: block; padding-right: 1em; }
#contactBar * { font-size: 120%; }
#contactBar { }footer { text-align: center; }
.grid-item { width: 99.333333333333%; margin: .5em; }
}
 @media all and (min-width: 768px) and (max-width: 1023px) {
}
 @media all and (max-width: 740px) {
#headNav ul.menus li { float: none; width: 100%; }
.portfolioBlockHome {width: 46%; }
#footerWrap { padding: 0 1em; }
}
 @media all and (min-width: 480px) and (max-width: 768px) {
}
 @media all and (max-width: 480px) {
		.portfolioBlockHome {width: 96%; }
.slogan, h1, h2, h3, h4, h5, h6 { text-align: center; }
.slogan, h1 { font-size: 2.25em; }
header .grid *[class*="col_"] { width: 100%; margin: 0; padding: 0 4px; }
.topPhone { display: inline-block; padding-right: 1em; }
#logo { margin: 80px auto 20px; display: block; width: inherit; }
#headNav { padding-left: 1.2em; }
#contactBar { width: 100%; text-align: center; position: absolute; top: -20px; left: 0; background: #000; color: #fff; padding: 1em 0; }
div.multiColumn4 { padding: 1em 0 0 0; -moz-column-count: 2; -moz-column-gap: 20px; -webkit-column-count: 2; -webkit-column-gap: 20px; column-count: 2; column-gap: 20px; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; text-align: center; }
.four_cols { column-count: 1; -webkit-column-count: 1; -moz-column-count: 1; overflow: visible!Important; -webkit-column-break-inside: avoid; break-inside: avoid-column; }
footer ul.menus a { font-size: 1.2em; padding: 4px 0; }
footer ul.menus li.listTitle { font-size: 1.6em; margin: .75em 0 .25em 0; }
.padH { padding: 0 0%; }
.padH > p { padding: 0 5%; }
.padItem * { padding: .25em; }
body{padding: 0 /*.45em;*/}
#inquiryform  input, #inquiryform  textarea { margin-top: 1.5em;}

#inquiryform label.error {
    color: red; margin-top: 6px; position: relative; font-size: 20px; 
}

#inquiryform label.#subjectDrop-error.error, #subjectDrop-error{ margin-top:32px!important; font-size: 32px; }
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), @media (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 13/10), (min-device-pixel-ratio: 1.3), (min-resolution: 2dppx), (min-resolution: 120dpi) {
/* body {
font-size: large;
}
h1 {
font-size: 2.5em;
}
.grid {
max-width: 100%;
width: 100%
}*/
}