/* MEDIA QUERIES // ------------------------ // */

@media screen and (width: 768px), screen and (height: 1024px) { /* SET WIDTH AND HEIGHT */ }
@media screen and (max-width: 768px), screen and (max-height: 1024px) { /* ANYTHING WITHIN WIDTH AND HEIGHT */ }

@media screen and (max-width: 1024px) {
div.getInfo { top: 200px; }
#hpSliderAni { width: auto; overflow: hidden; }
}
@media screen and (max-width: 980px) {
#navBlock { width: 100%; height: 50px; position: absolute; z-index: 90; top: 72px; left: 0; background: none transparent; }
ul.mainMenu { width: auto; margin-left: 10px; }
ul.mainMenu li a { font: 400 13px/50px 'Open Sans', Arial, Helvetica, sans-serif; padding: 0px 5px; }
#headerBar { width: auto; padding: 0 10px; }
#headerBar a.logoBar { margin: 0 0 0 -10px; }
#twitterFeed { width: auto; height: 64px; margin: 0 10px; overflow: hidden; }
#twitterBox { width: auto; }

#mainBar .content_header { width: auto; margin: -20px -10px 0 -10px; }
#mainBarPortfolio,
#mainBar.twoColumn,
#mainBar.loginPage { width: auto; padding: 20px 10px 10px 10px; }

#footerBar { width: auto; padding: 40px 10px 10px 10px; }

#mainBar .reVised.priceRequestForm { float: none; width: auto; margin: 0 0 1.5em 0; }
#mainBar .reVised.priceRequestForm form { width: 100%; }
#mainBar .reVised.priceRequestForm form .floatLeft { float: none; width: auto; }
#mainBar .reVised.priceRequestForm form .floatRight { float: none; width: auto; }
#mainBar .reVised.priceRequestForm input.inputBox { 
	width: 100%; 
	box-sizing: border-box; }
#mainBar .reVised.priceRequestForm input.inputBoxLong { 
	width: 100%; 
	box-sizing: border-box; }
#mainBar .reVised.priceRequestForm textarea.textBox { 
	width: 100%;
	height: 123px;
	box-sizing: border-box; }
#mainBar .priceRequestTxt { float: none; width: auto }

}
@media screen and (max-width: 960px) {
#hpSliderBox { height: auto; width: auto; }
#hpSliderTxt { height: auto; padding: 10px; color: #ffffff; font: 300 20px/1.8em 'Roboto', sans-serif; margin: 0 0 1em 0; }
#hpSliderTxt h1 { font: 400 30px/1.1em 'Roboto', sans-serif; }
#hpSliderTxt p { padding: 0; margin: 0; }
#hpSliderAni { width: auto; height: 330px; position: relative; margin: 0 0 0 0; }
#hpSliderImg { position: relative; width: auto; height: auto; margin: 0px auto; }
#hpSliderAni img { width: 60%; }
#hpVideoSummary { width: auto; padding: 40px 10px; font: 300 15px/1.4em "Roboto", sans-serif; }
#hpVideoSummary h3 { font: 300 22px/1.4em 'Roboto', Helvetica, Arial, sans-serif; margin-top: 20px; }
#hpVideoSummary a.btnOrange { margin: 10px 0 0 auto; }
#hpSummaryBox { width: auto; height: auto; margin: 30px 10px 30px 10px; }
#hpSummaryBox .summaryBlock { 
	width: 20%;
	min-height: 0;
	margin: 0 1%;
	padding: 10px 1%;
	font: normal 12px/1.2em Arial, Helvetica, sans-serif; }
#hpSummaryBox h2 { font-size: 20px; }
#hpSummaryBox h3 { font: normal 14px/1.1em Arial, Helvetica, sans-serif; margin-bottom: 0.8em; }
#hpSummaryBox .summaryBlock img { max-width: 100%; }
#hpQuoteBar { 
	width: auto;
	height: auto;
	padding: 0 10px;
	background: none;
	color: #333;
	font: normal 18px/25px 'Roboto', sans-serif;
	text-align: center; }
#hpQuoteBarLeft { float: none; padding: 0; }
#hpQuoteBarLeft a { color: #333; }
#hpQuoteBarRight { float: none; padding: 0; }
#hpQuoteBarRight a { 
	display: inline-block;
	font: bold 20px/20px 'Roboto', sans-serif;
	height: auto;
	padding: 5px 20px;
	float: none;
	background: url(bg_btn_orange.png) left center repeat-x; }
#hpQuoteBarRight a:hover { color: #ffe6d4; }

#breadCrubms { margin: 0 10px; width: auto; }
#mainBar { width: auto; margin: 0 10px; padding: 20px 10px 10px 10px; }

#bigGreyBar,
#seoGreyBar { width: auto; height: auto; margin: 0; }
	#bigGreyBarLeft { float: none; padding: 10px; text-align: center; }
	#bigGreyBarRight { float: none; padding: 10px; text-align: center; }
		#bigGreyBarRight a.buTTonOrange,
		#bigGreyBarRight a.buTTonGreen { display: inline-block; float: none; margin: 2px; }
#bigGreyBar .clear { width: 0; height: 0; }


div.why-us-frame { margin: -20px -10px 10px -10px; }
div.why-us-frame iframe { height: 400px; }

}
@media screen and (max-width: 840px) {
#headerBar ul.headerActions a.getAQuote,
#headerBar ul.headerActions a.getPricing { 
	width: auto;
	height: 20px;
	font: bold 15px/20px 'Roboto', sans-serif;
	background: url(bg_getaquote_orange.png) center -7px no-repeat;
	border-radius: 3px; }
#headerBar ul.headerActions a.getHelp { 
	width: auto;
	height: 20px;
	font: bold 15px/20px 'Roboto', sans-serif;
	padding-top: 0px;
	background: url(bg_getaquote_green.png) center -14px no-repeat;
	border-radius: 3px; }
#headerBar ul.headerActions a.callUs { 
	font: 600 18px/28px 'Open Sans', Arial, Helvetica, sans-serif;
	text-align: center;
	color: #fff;
	text-shadow: 1px 1px rgba(80, 80, 80, 0.7);
	text-decoration: none; }
#headerBar ul.headerLinks li a { padding: 0 5px; }

#hpSliderAni { height: 300px; }
#hpSliderAni img { height: 300px; }

#homePageNewProjectBlock { width: auto; padding: 0 10px; }
#homePageNewProjectBlock td { width: auto; }
#homePageNewProjectBlock td img { width: 90%; height: auto; }
#homePageTestimonialBlock { width: auto; padding: 0 10px 20px 10px; }
#homePageTestimonials .homePageTestimonial h4 { height: auto; margin: 0 0 1em 0; }

#hpAniBlock { width: auto; margin: 0 auto; padding: 20px 10px; }
#hpAniBlock .textColumn { float: none; width: auto; margin: 0; padding: 0; }
#hpAniBlock .hpAnimation { float: none; width: 470px; height: 290px; margin: 0 auto; overflow: hidden; }

#homeManyClients { height: auto; }
#homeManyClientsBlock { width: auto; margin: 0 auto; padding: 15px 10px 0 10px; }
#homeManyClientsBlock h3 { font: normal 38px/38px 'Open Sans', Helvetica, Arial, sans-serif; }
#homeManyClientsLeft,
#homeManyClientsRight { width: 45%; }

#homePageServiceBlock { width: auto; margin: 0 auto; padding: 20px 10px; }
#homePageServiceBlock .textColumn { float: left; width: 46%; margin: 0; padding: 0 2%; }
#homePageServiceBlock .textColumnWide { float: none; width: auto; margin: 0; padding: 0; }
#homePageServiceBlock .textColumnWide img { max-width: 100%; display: inline-block; width: auto; height: auto; }


#homePageMediaBlock { width: auto; }

#homePageTxtContainer { width: auto; }
#homePageBlog { width: 46%; padding: 20px 2% 25px 2%; }
#homePageBlogShadow { width: auto; }
#homePageTxtBlock { width: 46%; padding: 20px 2% 10px 2%; }

#mainBar table.webdevpage td { display: block; }
#mainBar .priceRequest td { display: block; width: auto !important; border: none !important; }

#mainBar .contactPages iframe { width: 100%; height: 300px; margin-bottom: 1em; }

#blogBlockMain .blogContent iframe { width: 100%; height: 300px; }
#blogBlockMain .blogContent img { width: 100%; height: auto; }

}
@media screen and (max-width: 640px) { 
#navBlock { position: absolute; top: 0px; width: auto; margin: 0; height: 40px; z-index: 100; padding: 0; }
#navBlock ul.mainNav { display: none; }
#navBlock #mobileNav { display: block; }
#navBlock .homeBtn { 
	background: transparent;
	border: none;
	width: 110px;
	height: 38px;
	margin: 0;
	font: 600 20px/40px 'Open Sans', Arial, Helvetica, sans-serif;
	color: #fff;
	overflow: hidden;
	position: relative;
	cursor: pointer;
	outline: none;
	display: block;
	border-radius: 0 5px 0 0; }
#navBlock .homeBtn:hover { color: #31b6dc; }
#navBlock ul { display: none; padding: 0; margin: 0 0 0 0; list-style: none; }
#navBlock ul.mobMenu { background: #2c2c2c; width: 300px; padding-top: 10px; }
#navBlock ul.mobMenu ul { background: #3c3c3c; }
#navBlock ul.mobMenu ul ul { background: #4c4c4c; }
#navBlock ul.mobMenu li { padding: 0; margin: 0; display: block; position: relative; border-bottom: 1px solid rgba(0,0,0,0.1); }
#navBlock ul.mobMenu li li { border: none; }
/* #navBlock ul.mobMenu li.first { display: none; }
#navBlock ul.mobMenu li li.first { display: block; } */
#navBlock ul.mobMenu li a { 
	display: block;
	color: #fff;
	padding: 15px 15px;
	font: normal 14px/14px Arial, Helvetica, sans-serif; }
#navBlock ul.mobMenu li a:hover { text-decoration: none; background: rgba(0,0,0,0.1); color: #31b6dc; }
#navBlock ul.mobMenu li li a { padding: 10px 15px 10px 20px; font: normal 14px/14px Arial, Helvetica, sans-serif; }
#navBlock ul.mobMenu li li li a { padding: 10px 15px 10px 25px; font: normal 14px/14px Arial, Helvetica, sans-serif; }
span.submenuTrigger { 
	display: block;
	position: absolute;
	top: 7px;
	right: 20px;
	border: 1px solid #3c3c3c;
	cursor: pointer;
	font-size: 15px;
	line-height: 25px;
	padding: 0;
	background: #3c3c3c;
	color: #fff;
	min-width: 20px;
	text-align: center; }
span.submenuTrigger:hover { color: #31b6dc; background: #000; }
#navBlock ul.mobMenu li li span.submenuTrigger { line-height: 20px; top: 6px; padding: 0 4px; }
#headerBar a.logoBar { margin: 40px 0 0 -10px; }
#headerBar ul.headerActions { padding: 0; float: none; position: absolute; top: 45px; right: 10px; }
#headerBar ul.headerLinks { padding: 0 0 0 0; float: none; position: absolute; top: 5px; right: 10px; z-index: 99; }

#hpSliderAni { height: 250px; }
#hpSliderAni img { height: 250px; }

#mainBar .textColumn img, 
#mainBar .textColumnTwo img { width: 100%; max-width: 100%; height: auto; }

#mainBar .content_header { width: auto; height: auto !important; margin: -20px -10px 0 -10px; padding: 20px !important; background-size: cover; }
#mainBar .content_header h1 { display: inline; color: #fff; text-shadow: 1px 1px 6px #000;}

#mainBar .priceRequestForm .floatLeft { float: none; padding: 0px; }
#mainBar .priceRequestForm .floatRight { float :none; padding: 0px; }
#mainBar .priceRequestForm form { width: auto; margin: 0px auto; }
#mainBar .priceRequestForm textarea.textBox { width: 90%; }
#mainBar .priceRequestForm input.inputBox { width: 90%; }

#mainBar .contactPages .floatLeft { float: none; padding: 0px; width: auto !important; }
#mainBar .contactPages .floatRight { float :none; padding: 0px; width: auto !important; }
#mainBar .contactPages .floatRightBubble { float: none; clear: both; width: auto !important; height: auto; margin: 20px 0 20px 40px; }
#mainBar .contactPages .floatRightBubble li { float: none; width: auto; }
#mainBar .contactPages .inputBox { width: 90%; }
#mainBar .contactPages .inputBoxLong { width: 90%; }
#mainBar .contactPages .textBox { width: 90%; }
#mainBar .contactPages iframe { width: 100%; height: 300px; margin-bottom: 1em; }
#mainBar .contactPages img { max-width: 100% !important; width: auto; }

#mainBarBlank .contactPages .floatLeft { float: none; padding: 0px; width: auto !important; }
#mainBarBlank .contactPages .floatRight { float :none; padding: 0px; width: auto !important; }
#mainBarBlank .contactPages .inputBox { width: 90%; }
#mainBarBlank .contactPages .inputBoxLong { width: 90%; }
#mainBarBlank .contactPages .textBox { width: 90%; }
#mainBarBlank .contactPages #formText { float: none; width: auto; }
#mainBarBlank .contactPages	#quoteRequest { float: none; width: auto; }

#mainBarLeft { float: none; width: auto; }
#mainBarLeft ul { overflow: hidden; background: #fff; margin: 0 10px; border-radius: 5px 5px 0 0; padding: 0 0 5px 0; }
#mainBarLeft li {  }
#mainBarLeft li a { padding: 10px; font: normal 12px/1em 'Open Sans', Tahoma, Geneva, Arial, Helvetica, sans-serif; }
#mainBarLeft h2 { padding: 0 0 0 20px; margin: 0 0 0 0; }
#mainBarRight { width: auto; float: none; padding: 20px 20px 10px 20px; }
#mainBarRight .floatLeft { float: none; padding: 0px; width: auto !important; }
#mainBarRight .floatRight { float :none; padding: 0px; width: auto !important; }
#mainBarRight .inputBox { width: 90%; }
#mainBarRight .inputBoxLong { width: 90%; }
#mainBarRight .textBox { width: 90%; }

table.detailedTable td { display: block; width: auto; height: auto; }

div.getInfo { top: 130px; padding: 10px 0 10px 25px; }
#footerBar .footerLinks { width: 23%; margin: 0 1% 0 1%; }
#footerBar .footerLinks.long { width: 48%; }

#contactBlock { top: 40%; }
#contactBlock span.showTab { /* top: 70px; */ }

.showCaseSet .showCaseItem { width: 48%; }

#blogBlockMain { float: none; width: auto; padding: 10px 0; border-right: none; }
#blogBlockSide { float: none; width: 50%; margin: 10px auto 0 auto; }
#blogBlockSide .blogPromo { display: none; }

#loginBlock .loginTabList a { padding: 0 8px 0 8px; }
#loginBlock #container { float: none; width: auto; min-height: 200px; }
#membersMarketBlock { float: none; width: auto; }
#membersMarketContent { border-left: none; border-top: 4px solid #ccc; }
#loginBlock .tickerTxt { width: 80%; padding: 0 2%;margin-bottom: 10px; }
#loginBlock #blogSubscribe { float: none; width: 240px; margin: 0 auto; clear: both; }

}
@media screen and (max-width: 620px) {
#hpSliderTxt { color: #ffffff; font: 300 14px/1.1em 'Roboto', sans-serif; }
#hpSliderTxt h1 { font: 400 20px/1.1em 'Roboto', sans-serif; }
#hpSliderAni { height: 180px; }
#hpSliderAni img { width: 240px; height: 180px; }

#hpSummaryBox .summaryBlock { width: 45%; margin-bottom: 5px; }

#hpVideoSummary a.btnOrange { margin: 10px auto 0 auto; }
#hpVideoSummary img { display: block; float: none; margin: 0 auto; }

#homePageTestimonials .homePageTestimonial { 
	float: none;
	width: auto;
	margin: 0 auto;
	font: normal 11px/1.5em 'Open Sans', Tahoma, Geneva, Arial, Helvetica, sans-serif;
	color: #5c5c5c; }

#mainBar .content_header h1 { font-size: 18px; }

table.detailsTable td { display: block; width: auto; }

.showCaseSet .showCaseItem { width: 98%; float: none; }
.showCaseSet .showCaseTxt { font-size: 12px; position: relative; }

#footerBar .footerLinks { float: left; width: 46%; margin: 0 2% 0 2%; font: normal 12px/1.5em 'Open Sans', Arial, Helvetica, sans-serif; color: #888; }
#footerBar .footerLinks.long { width: 98%; float: none; margin: 0 1% 20px 1%; }

#blogBlockSide { float: none; width: auto; margin: 10px auto 0 auto; }

#seoGreyBar input { 
	width: 95%;
	font: 600 16px/50px 'Open Sans', Helvetica, Arial, sans-serif;
	display: block; }
#seoGreyBar button { 
	padding: 0 2%;
	margin: 5px 0 5px 0;
	width: auto; }


}
@media screen and (max-width: 400px) {
#headerBar a.logoBar { margin: 37px 0 2px 0; text-align: center; width: 100%; padding: 0; }
#headerBar a.logoBar img { display: block; margin: 0 auto; z-index: 99; position: relative; }
#headerBar ul.headerActions { position: relative; top: auto; right: auto; text-align: center; z-index: 98; }
#headerBar ul.headerActions li { display: inline-block; }
#headerBar ul.headerActions a { padding: 0 5px; font: bold 12px/20px 'Roboto', sans-serif !important; margin: 0 10px; }
#headerBar ul.headerLinks li a i { display: inline-block; padding: 0 5px; }
#headerBar ul.headerLinks li a span { display: none; }

#hpSliderAni { height: 160px; }
#hpSliderAni img { height: 160px; }
#hpVideoSummary img { width: 100%; height: auto; }
#homePageNewProjectBlock td { display: block; }
#homePageNewProjects h3,
#homePageTestimonials h3 { width: auto; font: normal 9px/22px 'Open Sans', Helvetica, Arial, sans-serif; }
#homePageNewProjectBlock td img { width: 70%; }

#hpAniBlock .hpAnimation { width: 100%; height: auto; background: none; }
#hpAniBox { width: auto; height: auto; margin: 0 0 10px 0; }
#hpAniBoxNav { width: auto; margin: 0 0; }
#hpAniBoxPrev { top: auto; bottom: 0px; left: 23px; }
#hpAniBoxNext { top: auto; bottom: 0px; right: 23px; }

#homePageServiceBlock .textColumn { float: none; width: auto; padding: 0; }

#homePageBlog { float: none; width: auto; padding: 20px 10px 25px 10px; }
#homePageTxtBlock { float: none; width: auto; padding: 0px 20px 10px 20px; }

#mainBar .textColumn,
#mainBar .textColumnTwo { float: none; width: auto; }

table.features-table td { display: block; width: auto; }
table.features-table td img { width: 100%; max-width: 100%; height: auto; }

#mainBar img { max-width: 100%; width: 100%; height: auto; }
#mainBar .showCaseSet .showCaseItem img { width: 98%; }

#twitter_img { display: none; }

}