/*--------------------------------------------------------------
		Grid
--------------------------------------------------------------*/

.grid::before, .grid::after {
    content: "";
    display: table;
    margin: 0;
    padding: 0;
}
.grid { 
	position: relative;
	display: block;
	width: 100%;
	max-width:100%; 
	padding: 0; 
	margin: 0 auto; 
	font-size: 0;
	line-height: 0;
}
.grid .item { 
	position: relative;
	display: block;
	width: 100%; 
	max-width:100%; 
	padding: 0; 
	margin: 0 auto; 
}
.grid .item.preview { 
	min-width: 134%; 
	max-width: 134%; 
	margin: 0 -17% 0 -17%;
	overflow-x: hidden;
	overflow-y: auto;
}
.grid .item [class^='c'] { 
	position: relative; 
	display: inline-block;
	margin: 0 3.8% 40px 0; 
	padding: 0; 
	font-size: 0;
	line-height: 0;
	border: 0;
	outline: 0;
	vertical-align: middle;
}
.grid .item.preview [class^='c'] { 
	position: relative; 
	display: inline-block;
	margin: 0 3.85% 40px 0; 
	padding: 0; 
	font-size: 0px;
	line-height: 0px;
	outline: 0;
	vertical-align: middle;
}
.grid .item.indexhead [class^='c'] { 
	position: relative; 
	display: inline-block;
	margin: 5px 3.8% 10px 0; 
	padding: 0; 
	font-size: 0;
	line-height: 0;
	border: 0;
	outline: 0;
	vertical-align: middle;
}
.grid .item.index [class^='c'] { 
	position: relative; 
	display: inline-block;
	margin: 0 3.8% 0 0; 
	padding: 0; 
	font-size: 0;
	line-height: 0;
	border: 0;
	outline: 0;
	vertical-align: middle;
}
.grid .item.service {
	width: 90%;
	max-width: 90%;
	margin-left: 0;
}
.grid .item.service [class^='c'] { 
	position: relative; 
	display: inline-block;
	margin: 20px 3.8% 0 0; 
	padding: 0; 
	font-size: 0;
	line-height: 0;
	border: 0;
	outline: 0;
}
.grid .item [class^='c']:last-child,
.grid .item.preview [class^='c']:last-child { 
	margin: 0 0 40px 0; 
}
.grid .item.service [class^='c']:nth-child(3) {
	margin-right: 0 !important
}
.grid .item.service [class^='c']:last-child { 
	margin: 20px 0 0 0; 
}
.grid .item.indexhead [class^='c']:last-child { 
	margin: 0 0 10px 0; 
}
.grid .item.index [class^='c']:last-child { 
	margin: 0 0 0 0; 
}
.grid .item [class^='c'].vtop,
.grid .item.preview [class^='c'].vtop {
	vertical-align: top !important;	
}
.grid .item [class^='c'].vmiddle,
.grid .item.preview [class^='c'].vmiddle {
	vertical-align: middle !important;	
}
.grid .item [class^='c'].vbottom,
.grid .item.preview [class^='c'].vbottom {
	vertical-align: bottom !important;	
}
.grid .item [class^='c'].hide-on-mobile {
	display: none;
}

.grid .item.service .c-3,
.grid .item.service .c-4 { width: 90% }

.c-1 { width: 100%;}
.c-2 { width: 48%;}
.c-3 { width: 30.66%;}
.c-4 { width: 22%;}
.c-5 { width: 16.8%;}	
.c-6 { width: 13.33%;}	
.c-7 { width: 10.48%;}
.c-2-3 { width: 65.34%;}	
.c-2-4 { width: 74.2%;}
.c-2-6 { width: 82.87%;}
/*
c-0, .c-1, .c-2, .c-3, .c-4, .c-5, .c-2-3  { 
	width: 100%; 
}
*/


/*--------------------------------------------------------------
		Captions
--------------------------------------------------------------*/

.grid .item [class^='c'] .caption,
.grid .item.preview [class^='c'] .caption {
	display: none;
	padding-top: 20px;
	margin-bottom: 0 !important;
}
.grid .item [class^='c'] .caption.right,
.grid .item.preview [class^='c'] .caption.right { 
	float: right
}
.grid .item [class^='c'] .caption.right::after,
.grid .item.preview [class^='c'] .caption.right::after { 
	clear: both
}

/*--------------------------------------------------------------
		Grid Media
--------------------------------------------------------------*/
	
@media only screen and (min-width: 33.438em) { /* 535px */
.grid .item.preview { 
	min-width: 120%; 
	max-width: 120%; 
	margin: 0 -10% 0 -10%;
	overflow-x: hidden;
	overflow-y: auto;
}
.grid .item.service {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
}
.grid .item.service .c-3 { width: 48%; }
.grid .item.service .c-4 { width: 22%; }

}

@media only screen and (min-width: 41.62em) { /* 666px */

.grid .item.preview { 
	width: 100%; 
	min-width: 100%;
	max-width:100%; 
	margin: 0 auto; 
}
.grid .item.service {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
}
.grid .item.last{ 
	margin-bottom: 0;
}
.grid .item [class^='c'],
.grid .item.preview [class^='c'] { 
	position: relative; 
	display: inline-block;
	margin: 0 3.8% 60px 0; 
	padding: 0; 
	font-size: 0px;
	line-height: 0px;
	outline: 0;
}
.grid .item [class^='c']:last-child,
.grid .item.preview [class^='c']:last-child { 
	margin: 0 0 60px 0; 
}
.grid .item [class^='c'].hide-on-mobile {
	display: inline-block;
}
.grid .item.indexhead [class^='c']:last-child{ 
	margin: 20px 0 20px 0; 
}
.grid .item.service [class^='c']:nth-child(3) {
	margin-right: 3.8% !important
}

.c-1 { width: 100%;}
.c-2 { width: 48%;}
.c-3 { width: 30.66%;}
.c-4 { width: 22%;}
.c-5 { width: 16.8%;}	
.c-6 { width: 13.33%;}	
.c-7 { width: 10.48%;}
.c-2-3 { width: 65.34%;}	
.c-2-4 { width: 74.2%;}
.c-2-6 { width: 82.87%;}

.grid .item [class^='c'] .caption,
.grid .item.preview [class^='c'] .caption {
	display: block;
}

}
@media only screen and (min-width: 61.250em) { /* 980px */
	.grid .item.service .c-3 { width: 38.66%; }
}
@media only screen and (min-width: 80.000em) { /* 1280px */
	.grid .item.service .c-3 { width: 30.66%; }
}

