/* CSS Document for mobile */

body, html { background: #d8d8d8; margin: 0px; color: #4d4d4d; font-family: Arial, Helvetica, sans-serif;
	width: 100%; }

a { cursor: pointer; }

h1 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 16pt; padding: 0px; margin: 20px 0px 0px 0px; font-weight: bold; text-transform: uppercase; }

h2, .h2 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14pt; color: #777; padding: 0px; margin: 20px 0px 0px 0px; font-weight: bold; text-transform: uppercase; }


p, #content ul, ul.formatted { font-size: 12pt; line-height: 200%; margin: 12px 0px 0px 0px; }

#content ul { list-style: circle; margin: 0px 0px 0px 16px; padding: 0px; }

#content ul li { text-indent: -10px; padding-left: 10px; margin: 0px; }

#content ul.easySlider li { text-indent: 0px; padding: 0px; }

#container { margin: 0 auto;
	width: 100%;  }

#header { width: 100%; height: 180px; padding: 30px 0 0 0; float: left;
	background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%); }

#logo { width: 200px; height: 80px; margin: 0 0 0 calc(50% - 100px); }

a img { border: none; }

#secondaryNav { display: none; }

#navbar { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: normal; float: left; min-height: 40px; margin: 25px 0px 0px 0px; font-size: 14pt; 
	width: 100%; }

#navbar ul, #navbar ul li { margin: 0px 0px 0px 0px; padding: 0px; list-style: none; height: 40px; text-align: center; }

#navbar ul { float: left; width: 96%; padding: 0 2%; display: flex; justify-content: center; flex-wrap: wrap; }

#navbar ul li { float: left; display: inline-block; margin: 0 10pt; line-height: 20px; }

#navbar ul li a { padding-top: 0px; text-decoration: none; colordisplay: inline-block; cursor: pointer; padding-left: 0px; *display: inline-block; *vertical-align: bottom; }

#navbar ul .navhome a, #navbar ul .navhome:hover a, #navbar ul li:hover a { padding: 0px 0px 2px 0px; border-bottom: #b4c183 3px solid; }

#content { float: left; padding: 20px 2vw 40px 2vw; 
	margin: 0px 0 20px 0; width: 96vw; background: #f7f7f7; box-shadow: 0px 15px 10px 0px rgba(0, 0, 0, 0.1); display: flex; justify-content: center; flex-wrap: wrap-reverse; }

.flipLayout { display: initial !important; }

#contentCap { display:none; }

#footer { margin: 10px 0px 20px 3%; float: left; min-height: 100px;
	width: 94%; display: flex; justify-content: center; flex-wrap: wrap-reverse; }

#columnLeft { width: 100%; float: left; min-height: 10px; margin: 0px 0px 0px 0px; display: flex; flex-wrap: wrap; justify-content: center; }

#columnLeft img { max-width: 100%; }

#columnLeft h1, #columnLeft p { width: 100%; text-align: center; }


#columnRight .alignnone, #columnRight p img { max-width: 100% !important; height: auto !important; }

#columnRight { width: 100%; padding: 0; float: left; min-height: 10px; margin: 0px; }

.flipLayout #columnRight { padding: 40px 0 20px 0; }

#columnWide { width: 100%; margin: 0px 0px 0px 0px; }

#homeSplash { width: 90vw; max-width: 522px; outline: #666 10px solid; max-height: 300px; height: auto; background: url(/img/bgHomeSplash.png) no-repeat; background: none; padding: 0; margin: auto; display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }

#slider { width: 100vw; margin: auto; padding: auto; max-width: 522px; max-height: 300px; height: auto !important; overflow: hidden; }
#slider ul { width: 100%; }
#slider ul, #slider li { margin: 0px; padding: 0px; list-style: none; max-height: 300px; height: auto; overflow: hidden; }
#slider li img { width: 90vw; max-width: 522px; border: none; }
.easySlider a { border: none !important;  text-decoration: none; }
#slider li { height: calc(103vw / 2) }
.easySlider a:hover { border: none !important;  text-decoration: none; }
#slider ol { display: none; }
ol#controls { display: none !important }

#recentProjectsSlider ol, #recentProjectsSlider ul, #recentProjectsSlider li { padding: 0px; margin: 0px; height: 160px; width: 160px; overflow: hidden; list-style: none; }

#footer #recentProjects { min-height: 200px; float: left; padding: 0 0px; margin: 0px; display: none; }

#footer #info { width: 100%; font-size: 12px; line-height: 200%; min-height: 200px; float: left; margin: 40px auto 0px auto; }

#footer h1 { margin: 0px; padding: 5pt 0 5pt 0; }

#footer #emailForm { min-height: 200px; float: left; width: 100%; margin: 20px 0px 0px 0px; }

#footer #info ul, #footer #info li { display: block; margin: 0px; padding: 0px; width: 80px; float: left; list-style: none; font-weight: bold; }

#footer #info #secondaryInfo { width: 180px; float: right; text-align: right; }

#footer #info #copyright { width: 100%; float: left; margin: 40px 0px 10px 0px; height: 30px; text-align: center; }

#footer a { color: #4d4d4d; text-decoration: none; }

#footer a:hover { text-decoration: underline; }

#emailFooter input.footerInputEmail, #emailFooter textarea, .txtInput { width: 100%; height: 24px; background: #f9f9f9; border: 1px solid #b6b6b6; padding: 0px 2%;
font-size: 13pt; box-sizing: border-box; }

#emailFooter input.footerInputEmail:hover, #emailFooter textarea:hover, #emailFooter input.footerInputEmail:focus, #emailFooter textarea:focus, .txtInput:hover, .txtInput:focus { border-color: #693; }

#emailFooter textarea { height: 80px;  }

.inputError { border: 1px solid #C00 !important; }

.inputErrorLabel { font-weight: bold; color: #C00; }

#emailSent { display: none; }

#emailSent img { width: 64px; height: 64px; float: left; margin: 5px 0px 0px 123px; }

#emailSent p { width: 310px; float: left; }

#emailFooter div { font-size: 12px; line-height: 29px; height: 24px; margin: 5px 0px 1px 0px; }

.btnFooterEmail { font-size: 12px !important; color: #4d4d4d; display: block; text-align: center; background: url(/img/btnSubmit.png) no-repeat; width: 70px; height: 20px; line-height: 20px; margin-top: 12px; cursor: pointer; padding: 0px; border: 0px; }

.btnFooterEmail:hover { background-position: center; }

.btnFooterEmail:active { background-position: bottom; }

#overlay { width: 100%; height: 100%; position: fixed; left: 0px; background: #000; z-index: 100; display: none; }

.overlay { cursor: pointer; }

.popOver { display: none; z-index: 200; position: fixed; top: 0; padding: 0 0 20px 0; margin-top: 10px; left: 0; cursor: default; width: calc(100% - 40px); min-height: 40px; background: #fff; -moz-box-shadow: #666 0 2px 10px; -webkit-box-shadow: #666 0 2px 10px; -khtml-box-shadow: #666 0 2px 10px; box-shadow: #666 0 2px 10px; }

.popOverTall { margin-top: 10px; }

.popOver div { display: none; padding-bottom: 0px; overflow-y: auto; max-height: 90vh; }

.popOver h1 { margin-top: 0px; }
.popOver p, .popOver ul { width: 95%; margin-left: 1%; }
.popOverLogin { height: 340px; }
.popOverClose { width: 40px !important; height: 40px !important; float: right; padding: 0 !important; background: url(/img/btnClose.png) no-repeat; margin: 0px; cursor: pointer; }

.popOverClose:hover { background-position: center; }

.popOverClose:active { background-position: bottom; }

.closeLink { position: absolute; width: 100%; margin: -30px 0px 0px 0px; text-align: center; display: none !important; }

.loginLabel { display: block; font-size: 12px; margin: 15px 0px 0px 0px; line-height: 200%; }

#btnLogin { margin-top: 20px; }

#loginForm { width: 90%; height: 150px; display: block; float: left; }

#visibilityToggle { right: calc(11% + 20px) !important; margin-top: -19px; opacity: 1; }

#checkboxRememberUser { margin-top: 14px; float: left; }

#labelForLoginCheckbox { margin-top: 10px; margin-left: 0px; float: left; text-align: left; }

#loginInstructions { width: calc(100% - 40px); min-height: 100px; display: block; position: absolute; margin: 200px 0px 0px 0px; font-size: 12px; line-height: 200%; }

#loginInstructions div { display: inline; }

.unselectedInput { color: #999; }

.incompatibilityWarning { width: 900px; background: #ffb57c; height: 40px; -moz-box-shadow: #666 0 2px 10px; -webkit-box-shadow: #666 0 2px 10px; -khtml-box-shadow: #666 0 2px 10px; box-shadow: #666 0 2px 10px; position: fixed; margin: 0px 0px 0px 30px; }

.incompatibilityWarning img { float: left; width: 34px; height: 34px; margin: 3px 0px 0px 10px; }

.incompatibilityWarning span { float: left; width: 800px; font-weight: bold; font-size: 14px; line-height: 34px; color: #000; height: 34px; margin: 3px 0px 0px 10px; }

.alert { font-weight: bold; color: #d00; }

#servicesSelector { width: 100%; height: 60px; margin: 40px 0px 40px 0px; }

#selectWeb, #selectLogo, #selectPrint, .serviceSelector { width: 31%; padding: 0 1%; height: 60px; z-index: 30; background: linear-gradient(180deg, #fcfcfc, #e4e4e4); cursor: pointer; float: left; box-shadow: #aaa 0 0px 6px; display: flex; }

.serviceSelector h2 { line-height: 14pt; display: inline-block; font-size: 12pt; text-align: center; padding: 0px; margin: auto; }

.serviceSelected h2 { color: #4d4d4d; font-size: 12pt; }

#serviceInfoContainer { min-height: 300px; }

.serviceSelector:hover, .serviceSelected { background: linear-gradient(180deg, #e4e4e4, #fcfcfc) !important; z-index: 35; }




.serviceDiv { display: none; }

.serviceDivActive { display: block; }

span.sideNote { display: block; text-align: right; text-align: right; margin-top: -29px; font-size: 11pt; line-height: 200%; color: #777; text-transform: uppercase; }

span.sideNote a { display: block; margin-left: 20px; color: #777; border-bottom: none; text-decoration: underline; }

span.sideNote a:hover { border-bottom: none; }

.serviceHeader { height: 50px; width: 100%; margin: 20px 0px 0px 0px; float: left; display: flex; }

.serviceHeader img { float: left; display: block; width: 50px; height: 50px; }

.serviceHeader .h2 { line-height: 15pt; font-size: 13pt; float: left; display: inline-block; margin: auto 0px auto 10px; width: calc(100% - 60px); padding: 0px; }

#serviceInfoContainer p { width: calc(100% - 60px); float: left; margin: -5px 0px 0px 60px; }

#serviceDivContainer { width: 100%; min-height: 360px; float: left; }

#serviceQuickQuote { width: 100%; margin: 0px 0px 0px 0px; float: left; }

#serviceQuickQuote h2 { margin: 0px; padding: 0px; line-height: 22px; }

#serviceQuickQuote input { width: 296px; height: 24px; background: #fff; border: 1px solid #b6b6b6; padding: 0px 0px 0px 0px; margin: 10px 0px 0px 0px; }

#serviceQuoteForm { margin: 0px 0px 40px 0px; }

#btnServiceRequestAQuote { text-align: center; line-height: 48px; border-bottom: none; margin: 30px 0 0 5%; height: 48px; width: 90%; background: linear-gradient(180deg, #fcfcfc, #e4e4e4); box-shadow: #999 0 2px 10px; }

#btnServiceRequestAQuote:active { background-position: center top; }

#btnServiceRequestAQuote a { border: none !important; width: 100%; height: 48px; display: block; }

.serviceFolioLink a { display: none !important; }

#serviceFolioOverlay { background: url(/img/serviceFolioOverlay.png) no-repeat; margin: -300px 0px 0px 0px; }

#portfolioInstructions { height: 70px; margin: 10px 0px 0px 0px; padding: 0px; width: 298px; float: left; font-size: 11px; line-height: 150%; color: #777;
display: none; }

#thumbs { margin: 7px 0px 0px 0px; padding: 0px; text-indent: 0px; list-style: none; width: 306px; float: left; min-height: 350px; }

#thumbs ul { margin: 0px; paddign: 0px; }

#thumbs li { width: 62px; height: 62px; background: #eee; list-style: none; display: inline block; float: left; padding: 0px !important; margin: 0px 8px 8px 0px !important; text-indent: 0px !important; border: 3px solid #fff; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-box-shadow: #999 0 2px 10px; -moz-box-shadow: #999 0 2px 10px; box-shadow: #999 0 2px 10px; }

#thumbs a img { width: 62px !important; height: 62px !important; margin: 0px; }

.selected { border-color: #666 !important; -webkit-box-shadow: #666 0 2px 3px !important; -moz-box-shadow: #666 0 2px 3px !important; box-shadow: #666 0 2px 3px !important; }

#thumbs a { border: 0px !important; }

#thumbs li:hover { border-color: #999; }

.portfolioPrevLink, .portfolioNextLink { background: url(/img/btnPrevNext.png) no-repeat; display: block; width: 40px; height: 40px; line-height: 100px; overflow: hidden; }

.portfolioPrevLink { float: left; background-position: top left; }

.portfolioNextLink { float: right; background-position: top right; }

.portfolioPrevLink:hover { background-position: left center; }

.portfolioNextLink:hover { background-position: right center; }

.portfolioPrevLink:active { background-position: left bottom; }

.portfolioNextLink:active { background-position: right bottom; }

ul.thumbs { height: 310px; }

.pagination { width: 298px; height: 40px; float: left; line-height: 100px; *line-height: 40px; overflow: hidden; }

#portfolioSelector { width: auto; height: 40px; padding: 10px 5px; background: none; margin: 13px 0px 0px -5px; display: flex; justify-content: center; flex-wrap: wrap; }

.portfolioSelector { -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; width: 99px; height: 40px; background: url(/img/btnPortfolioNavigation.png) top repeat-x; float: left; cursor: pointer; text-align: center; margin: 0px; padding: 0px; line-height: 40px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; text-transform: uppercase; display: inline; text-decoration: none; color: #4d4d4d; box-shadow: #999 0 2px 3px; }

.portfolioSelector:hover, .portfolioSelected { background: url(/img/btnPortfolioNavigation.png) bottom repeat-x; }

.portfolioSelected { color: #b4c183; }

.portfolioSelector .portfolioTip { display: none; width: 240px; height: 20px; background: #eee; position: relative; line-height: 20px; font-size: 12px; display: block; opacity: 0; visibility: hidden; color: #4d4d4d; font-weight: normal; border: 3px solid #fff; -moz-box-shadow: #999 0 2px 7px; -webkit-box-shadow: #999 0 2px 7px; -khtml-box-shadow: #999 0 2px 7px; box-shadow: #999 0 2px 7px; margin: -60px 0px 0px -74px; -moz-transition-delay: 1.0s; -webkit-transition-delay: 1.0s; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; }

.portfolioSelector:hover .portfolioTip { opacity: 0.9; visibility: visible; margin: -75px 0px 0px -74px; }

#portfolioLogo { width: 98px; margin: 0px 1px; }

.slideshow-container { width: 100%; height: auto; padding: 0; background: none; box-shadow: #999 0 2px 10px; margin: 0px; margin-top: 30px; }

div.caption, .pagination { background: #f7f7f7; }

#caption { min-height: 60px; height: auto; margin: 30px 0px 0px 0px; width: 100%; }
#galleryInstructions { display: none; }
#caption h2, #caption p { margin: 0px 0px 0px 0px; line-height: 18px; }

#slideshow img { width: 100%; height: auto; padding: 0; margin: 0; margin-top: -20px; }

#slideshow { height: calc(100vw / 1.64); }

a.advance-link { underline: 0px; text-decoration: none; cursor: default; }

.testimonial { font-size: 11px; /*font-variant: small-caps;*/ font-style: italic; }

p#sidebarContact b { width: 20px; display: inline-block; }

.hideOldIE { *display: none; *visibility: hidden; }

#contactMail input.contactInput, #contactMail textarea { font-size: 13pt; width: 100%; height: 24px; background: #f9f9f9; border: 1px solid #b6b6b6; padding: 0px 0px 0px 0px; }

#contactMail input.contactInput:hover, #contactMail textarea:hover, #contactMail input.contactInput:focus , #contactMail textarea:focus { background: #eee; border-color: #693; }

#contactMail textarea { height: 100px; resize: none; padding: 0px;  }

.inputError { border: 1px solid #C00 !important; }

.inputErrorLabel { font-weight: bold; color: #C00; }

input:focus, textarea:focus { outline: none; }

#contactSent { display: none; }

#contactSent img { width: 64px; height: 64px; float: left; margin: 5px 0px 0px 229px; }

#contactSent p { width: inherit; float: left; }

#contactMail div { font-size: 12pt; line-height: 29px; height: 24px; margin: 5px 0px 1px 0px; }

.btnContact { font-size: 12px !important; color: #4d4d4d; display: block; text-align: center; background: url(/img/btnSubmit.png) no-repeat; width: 70px; height: 20px; line-height: 20px; margin-top: 12px; cursor: pointer; padding: 0px; border: 0px; }

.btnContact:hover { background-position: center; }

.btnContact:active { background-position: bottom; }

#registrationForm input.txtInput { display: block; margin-bottom: 10px; }

.clientGallery { display: block; float: left; width: 100%; }

.clientGallery img { float: left; max-width: 165px; max-height: 260px; border: 3px solid #fff; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-box-shadow: #999 0 2px 10px; -moz-box-shadow: #999 0 2px 10px; box-shadow: #999 0 2px 10px; margin: 10px 40px 30px 0px; background: #eee; }

.clientGallery img:hover { border-color: #666; -webkit-box-shadow: #666 0 2px 3px; -moz-box-shadow: #666 0 2px 3px; box-shadow: #666 0 2px 3px; }

/*disable live chat till it's workign normal*/
#liveChat { display: none; }

/* Special for blog */
.entry img { max-width: 522px !important; }
#columnRight div.navigation a { color: #999; text-decoration: none; border-bottom: 1px dashed #999; font-weight: bold; font-size: 12px; text-transform: uppercase; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; display: inline-block; }
#columnRight div.navigation a:hover { color: #b4c183; border-bottom: #b4c183 solid 1px; }
.navigation .alignright { float: right; }
.navigation .alignleft { float: left; }
#columnRight div.navigation { width: 100%; display: block; height: 30px; }
.type-post small { margin-top: 20px; }
.avatar { display: none; }
li.comment, li.pingback { font-size: 12px; margin-top: 20px; width: 502px; padding: 10px; }
li.even { background-color: #eee; }
ol.commentlist { list-style: none; text-indent: 0px; margin: 0px; padding: 0px; width: inherit; }
ul.children { list-style: none !important; margin-left: 20px !important; }
ul.children li.comment, ul.children li.pingback { width: 440px; margin-top: 30px !important; padding: 10px !important; padding-left: 30px !important; }
.commentlist, #respond, #comments, .postmetadata { /*display: none !important;*/ }
#respond input { max-width: 96%; font-size: 13pt; margin-top: 10pt; }
#respond textarea, #respond input { max-width: 96%; font-size: 13pt; }
#respond input { margin-top: 15pt; }
#respond p { max-width: 96%; }
#respond label { position: absolute; left: 3%; margin-top: -5pt; font-size: 13pt; }
.commentlist { max-width: 96%; }
.commentlist li { max-width: 97%; padding-left: 0 !important; }
.commentlist ul.children { margin-left: 0 !important; padding: 0; }
.commentlist ul.children .comment { margin-left: 0; padding: 0; }
.comment, .pingback { overflow-wrap: anywhere; word-wrap: break-word; word-break: break-word; }
.comment-body, .commentlist p { padding-left: 0; max-width: 97%; overflow-wrap: anywhere; word-wrap: break-word; word-break: break-word; }
.comment-body { padding-left: 10px; }
.depth-2 { max-width: calc(97% - 20px) !important; }
.depth-3 { max-width: calc(97% - 40px) !important; margin-left: 0px !important; }