@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	15;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/



/***** MOBILE: 600px and below. *****/

/*INTRO BENEATH HERO IMAGE*/

.servicesPanelBG {		
  height: 360px;
  background-image: linear-gradient(#732612, #96411a); 
  }


.servicesPanelintro {
	margin-left: 16px;
	margin-right: 16px;
	height: auto;
	text-align: center;
	color: #FFFFFF;
	}

/*As opposed to red background in Intro, this states the background for each section as white overlayed over off-white total background*/

.secondaryBG {	
  height: auto;
  background-color: #eeeeee;
}

/*Product, Technical and Delivery card image & description*/
.cardimage {
	padding: 8px;
}

.carddescription {
	padding: 8px;
}


.learnMore {
	text-align:right;
	padding-right: 12px;
	color: #cc0000;
}


.call-btn {
  background-color: #FFFFFF;
  color: #cc0000;
  font-size: 1.5vw;
  padding: 2px 4px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  width: 60px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

/*SERVICE OFFERINGS*/
.Product {	
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 10px;
	width: 100%;
	height: 100%;
	display: block;
	background-color: #FFFFFF;
	box-shadow: 2px 2px 2px 2px #c1c1c1;
}

.Technical {	
	margin-left: 0px;
	margin-top: 10px;
	width: 100%;
	height: 100%;
	display: block;
	background-color: #FFFFFF;
	box-shadow: 2px 2px 2px 2px #c1c1c1;
}

.Delivery {	
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 10px;
	width: 100%;
	height: 100%;
	display: block;
	background-color: #FFFFFF;
	box-shadow: 2px 2px 2px 2px #c1c1c1;
}

/*VIDEO SECTION*/
.video {
	margin-top: 10px;
	display: block;
	
	background-color: #FFFFFF;
	box-shadow: 2px 2px 2px 2px #c1c1c1;
}

.videoCardimage {
	float: left;
	height: auto;
	padding-top: 4px;
	padding-left: 8px;
	width: 100%;
}

.videoCarddescription {
	float: left;
	height: 260px;
	margin-top: 0px;
	margin-left: 0px;
	padding-top: 20px;
	padding-left: 8px;
	width: auto;
	background-color: #FFFFFF;
}

/*TESTIMONIAL SECTION*/
.testimonial {
	margin-top: 14px;
	display: block;
	height: 320px;
	background-color: #FFFFFF;
	box-shadow: 2px 2px 2px 2px #c1c1c1;
}

.testimonialImage {
	float: left;
	clear: left;	
	margin: 0px;
	padding: 8px;
}

.testimonialDescription {

	margin-top: 10px;
	margin-left: 0px;	
	padding-top: 10px;
	padding-left: 8px;
	padding-right: 8px;
	background-color: #FFFFFF;

}


/***** TABLET & DESKTOP: 600px to 1200px*****/

@media only screen and (min-width: 600px) {
.gridContainer {
	padding-left: 0;
	padding-right: 0;
}

.servicesPanelBG {		
  height: 340px;
  }

.servicesPanelintro {
	margin-left: 50px;
	margin-right: 50px;
	height: auto;
	text-align: center;
	font-size: 16px;
	color: #FFFFFF;
	}
	
.call-btn {
  margin-top: 1vw;
  width: 130px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}


/* Columns for types of services - only for tablet and desktop. No columns for mobile */
.columns {
  float: left;
  width: 30.25%;  
  margin-bottom: 14px;
}

/* Remove extra left and right margins, due to padding in columns */

.row {
	margin-left: 0px; 
	margin-right: 0px;
	}

/* Clear floats after the columns */
.row:after {
  content: "";
  clear: both;
}

.Product {
	height: 360px;
	margin-left: 20px;
	margin-right: 0px;
	margin-top: -80px;
}

.Technical {
	height: 360px;
	margin-left: 36px;
	margin-top: -80px;
}

.Delivery {
	height: 360px;
	margin-left: 50px;
	margin-right: 0px;
	margin-top: -80px;
}

/*VIDEO SECTION*/
.video {
	height: 100%;
	margin-left: 20px;
	margin-right: 25px;
	margin-bottom: -16px;
	padding-right: 40px;
	display: block;
	background-color: #FFFFFF;
	box-shadow: 2px 2px 2px 2px #c1c1c1;
}

.videoCardimage {
	float: left;
	height: auto;
	padding-top: 20px;
	padding-left: 20px;
  	max-height:10px;
	width: 200px;
}

.videoCarddescription {
	float: none;

	margin-left: 330px;
	height: 240px;
	padding-top: 20px;

	width: auto;
}

/*TESTIMONIAL SECTION*/
.testimonial {
	margin-left: 20px;
	margin-right: 25px;
	margin-bottom: -16px;
	padding-right: 40px;
	display: block;
	background-color: #FFFFFF;
	box-shadow: 2px 2px 2px 2px #c1c1c1;
	height: 220px;
}

.testimonialImage {
	float: left;
	margin: 10px;
 	max-width:30%;
  	max-height:10px;
	width: 100px;
}

.testimonialDescription {
	margin-left: 180px;
	height: auto;
	padding: 8px;
	width: auto;
	background-color: #FFFFFF;
}

}


/* @MEDIA for 769px to a max of 1200px*/

@media only screen and (min-width: 769px) {

.gridContainer {
	max-width: 1232px;
}

.servicesPanelBG {		
  height: 410px;
  }

.servicesPanelintro {
	font-size: 24px;
	}


.call-btn {
  margin-top: 1vw;
  width: 180px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.row {
	margin-left: -10px; 
	margin-right: -40px;}


.Product {
	margin-left: 30px;
	margin-right: 0px;
	margin-top: -80px;
	height: 430px;
}
.ProductText {
	padding: 5px;
}

.Technical {
	margin-left: 40px;
	margin-top: -80px;
	height: 430px;
}

.Delivery {
	margin-left: 48px;
	margin-right: 0px;
	margin-top: -80px;
	height: 430px;
}

/*TESTIMONIAL SECTION*/
.testimonial {
	margin-right: 30px;
	height: 200px;
}
	
.video {
	margin-right: 30px;}
}