@media screen and (max-width: 780px) {
/*
   body { 
      font-size: 6px; 
   }
*/

.xleft img, .xright img {transition-duration: 0; transition-delay: 0;}
.xleft .info, .xright .info {transition-duration: 0; transition-delay: 0;}

	/*#titlebar.titlebar .container .row-fluid {height: auto; min-height: 0;}*/
	#titlebar.titlebar .container {min-height: 280px;}
	#titlebar.style2 {background-size: cover !important; background-position: top center !important;}
	
	/* Homepage */
	.pimg img {max-width: 40%; margin-bottom: 25px;}
	.feature {padding: 0;}
  
    .tp-caption {
    	font-size: 3vw !important;
    	line-height: 1.3 !important;
    }
    .tp-caption a.button, .bb .button_large {padding: 4px 8px;}
	
	/* Solutions */
	
	.product-col .inner-content {min-height: auto; margin-bottom: 25px;}
	.m-auto-height {height: auto !important;}
	
	.product-card {margin: 0; margin-bottom: 15px; border: 1px solid #3498db;}
	.product-card:hover .inner-content {min-height: auto;}
	.product-card:focus .inner-content {min-height: auto;}
	
	/* Pricing */
	.pricing-cards .card {margin: 0; margin-bottom: 25px; min-height: auto;}

  #titlebar.titlebar.slim .container {min-height: 0;}
  	
	.expanded #header {
		margin-left: -80%;
	}
}

@media (min-width: 501px) and (max-width: 799px) {
  .product-card { 
  	margin-right: 3px !important;
  	margin-left: 3px !important;
  }
}

@media screen and (max-width: 500px) {
  #titlebar.style2 .container .row-fluid {height: auto; min-height: 0;}
}

@media screen and (min-width: 501px) and (max-width: 600px) {
  #titlebar.style2 .container .row-fluid {height: auto; min-height: 325px;}
}

@media screen and (min-width: 601px) and (max-width: 680px) {
  #titlebar.titlebar .container .row-fluid {height: auto; min-height: 375px;}
}

@media screen and (max-width: 767px) {
  /* 768px is the breakpoint for putting the images to the side of the text so 768-780px is a no-man's land resulting
     in small images.  Moving this out of the max 780px query above eliminates that gap */
  /* About */
  div.about img {width: 40%; margin: 0 auto !important; padding: 0; display: block;}
}

@media screen and (min-width: 768px) and (max-width: 800px) {
	/* before, the pdca img on the about page was huge in 781-800px screen sizes, moving the above row out of the
	   max 780px section into the above max 767px section caused the problem to extend down to 768px (ipads), and
	   occurred from 768-800px.  at 800px the layout changes to the image and text being side-by-side, so 768-800
	   needed to be covered.  adding the .row-fluid class targets only the last image (the only one w/the issue) */
	div.about .row-fluid img {width: 40%; margin: 0 auto !important; padding: 0; display: block;}
}

@media screen and (max-width: 980px) {
	/* Nagivation */
	
	.menu-button {padding-top: 7px;}
	.brand {padding: 0;}
	
	
}


@media screen and (max-width: 1150px) {
	.pricing-cards .card {font-size: 15px; line-height: 1.3;}
}